報(bào)錯信息

其實(shí)整個過程我一共經(jīng)歷了三個報(bào)錯信息，分別是

1.Current request is not a multipart request：當(dāng)前請求不是multipart 請求

2.the request was rejected because no multipart boundary was found：請求被拒絕，因?yàn)槲凑业蕉嗖糠诌吔?/p>

3.Required request part ‘files’ is not present

報(bào)錯產(chǎn)生的程序

我是想在vue中實(shí)現(xiàn)一個上傳文件的功能，采用axios方式上傳，數(shù)據(jù)模式采用formdata。

然后就產(chǎn)生了各種錯誤。

錯誤解決

Current request is not a multipart request：

這個錯誤是因?yàn)楹蠖俗x取MultipartFile 類型數(shù)據(jù)時，對申請頭的類型進(jìn)行了一個判斷，他只識別 multipart 開頭的 Content-Type。所以我們需要修改headers 的 Content-Type。

但是手動添加headers會產(chǎn)生 第二個錯誤。所以建議使用formdata 的方式，參數(shù)為formdata 時，瀏覽器會自動添加一個標(biāo)準(zhǔn)的headers。

錯誤：會引發(fā)新的錯誤

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

正確：

	let format = new window.FormData();
	format.append("file",files[0].raw)
	let res = await api.test(format)
	var options({
	        url: 地址,
	        method: 'post',
	        data: formdata,
	    })
	axios(options).then((res) => {console.log(res)})

當(dāng)然要保證format的key要和后端接收參數(shù)的名稱保持一致，不然會引發(fā)第三個錯誤。
（對了，正常 let format = new FormData();就可以，但一些vue情況下可能會報(bào)錯找不到FormData ，就可以試試new window.FormData();）

新的問題

正常情況下此時瀏覽器會自動修改headers的Content-Type，但是我的請求頭的類型依舊沒有變化，經(jīng)過進(jìn)一步研究，發(fā)現(xiàn)axios在請求發(fā)送出去之前會進(jìn)行一次攔截，自動給我們的請求設(shè)置一些參數(shù)。所以我們需要修改一下不讓它在修改。最重結(jié)果為

	let format = new window.FormData();
	format.append("file",files[0].raw)
	let res = await api.test(format)
	var options({
	        url: 地址,
	        method: 'post',
	        data: formdata,
	         transformRequest: [function(data, headers) {
            // 去除post請求默認(rèn)的Content-Type
            delete headers.post['Content-Type']
            return data
          }],
	    })
	axios(options).then((res) => {console.log(res)})

2.the request was rejected because no multipart boundary was found

這是因?yàn)檎５?Content-Type是這樣的

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

后面會有一個自動生成的boundary來作為分隔符,而人工寫的是沒有的，也很難人工生成。
所以如果想使用multipart/form-data 的話，建議不要人工添加，使用FormData 是較好的辦法。

3.Required request part ‘files’ is not present

這個問題有很多可能性，其中最常見的就是

public void upload(@RequestParam("files") MultipartFile file) throws Exception {
	System.out.println(file.getOriginalFilename());
}

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

后端接受文件的名稱和前端formdata的key鍵不相同，修改為相同就好。

其他還有可能是前端傳參問題，參數(shù)可能并沒有傳送到后端，或者也可能是因?yàn)镃ontent-Type的不同導(dǎo)致讀取文件方式不同。

我產(chǎn)生這個報(bào)錯是因?yàn)镃ontent-Type 不是’multipart/form-data’ ，但是無法通過RequestParam方法獲得formdata中的數(shù)據(jù)（接收和傳入的參數(shù)不是文件類型）。

總結(jié)

到此這篇關(guān)于axios上傳文件錯誤:Current request is not a multipart request解決的文章就介紹到這了,更多相關(guān)axios上傳文件錯誤內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論