Axios upload file error: Current request is not a multipart request solution

Report an error message

In fact, I experienced three error messages in the whole process, namely

request is not a multipart request: The current request is not a multipart request

request was rejected because no multipart boundary was found

request part ‘files’ is not present

The program that reports an error

I want to implement a function of uploading files in vue, uploading them using axios, and using formdata in the data mode.

Then various errors were generated.

Error resolution

Current request is not a multipart request：

This error is because when the backend reads the MultipartFile type data, it makes a judgment on the type of the application header, and it only recognizes the Content-Type at the beginning of the multipart. So we need to modify the Content-Type of headers.

But adding headers manually will produce a second error. Therefore, it is recommended to use formdata. When the parameter is formdata, the browser will automatically add a standard headers.

Error: A new error will be raised

var request({
        url: address,
        method: 'post',
        headers:{'Content-Type': 'multipart/form-data'},
        data: formdata,
    })

correct:

	let format = new ();
	("file",files[0].raw)
	let res = await (format)
	var options({
	        url: address,
	        method: 'post',
	        data: formdata,
	    })
	axios(options).then((res) => {(res)})

Of course, it is necessary to ensure that the format key must be consistent with the name of the parameter received by the backend, otherwise a third error will be triggered.
(By the way, it's OK to let format = new FormData();, but in some vue cases, there may be an error that cannot be found. You can try new ();)

New questions

Under normal circumstances, the browser will automatically modify the Content-Type of the headers, but the type of my request header still has not changed. After further research, it was found that axios will intercept it once before the request is sent out, and automatically set some parameters for our request. So we need to modify it and not let it be modified. The heaviest result is

	let format = new ();
	("file",files[0].raw)
	let res = await (format)
	var options({
	        url: address,
	        method: 'post',
	        data: formdata,
	         transformRequest: [function(data, headers) {
            // Remove the default Content-Type for post request            delete ['Content-Type']
            return data
          }],
	    })
	axios(options).then((res) => {(res)})

request was rejected because no multipart boundary was found

This is because normal Content-Type is like this

Content-Type: multipart/form-data; boundary=----WebKitFormBoundarywdz99kUqBwK48chO

There will be an automatically generated boundary afterwards as a separator, and manual writing does not exist, and it is difficult to generate manually.
Therefore, if you want to use multipart/form-data, it is recommended not to add it manually. Using FormData is a better way.

request part ‘files’ is not present

There are many possibilities for this problem, the most common of which is

public void upload(@RequestParam("files") MultipartFile file) throws Exception {
	(());
}

let format = new ();
	("file",files[0].raw)

The name of the backend accepts file and the key key of the frontend formdata are different, just modify it to the same.

Others may be the problem of front-end parameter transmission, the parameters may not be transmitted to the back-end, or it may be that the file reading method is different due to different Content-Types.

I generated this error because Content-Type is not 'multipart/form-data' , but the data in formdata cannot be obtained through the RequestParam method (the received and passed parameters are not file types).

Summarize

This is the article about axios upload file error: Current request is not a multipart request solution. For more related axios upload file error content, please search for my previous article or continue browsing the related articles below. I hope everyone will support me in the future!