報(bào)錯(cuò)信息

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

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

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

3.Required request part ‘files’ is not present

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

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

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

錯(cuò)誤解決

Current request is not a multipart request：

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

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

錯(cuò)誤：會(huì)引發(fā)新的錯(cuò)誤

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ù)的名稱保持一致，不然會(huì)引發(fā)第三個(gè)錯(cuò)誤。
（對(duì)了，正常 let format = new FormData();就可以，但一些vue情況下可能會(huì)報(bào)錯(cuò)找不到FormData ，就可以試試new window.FormData();）

新的問題

正常情況下此時(shí)瀏覽器會(huì)自動(dòng)修改headers的Content-Type，但是我的請(qǐng)求頭的類型依舊沒有變化，經(jīng)過進(jìn)一步研究，發(fā)現(xiàn)axios在請(qǐng)求發(fā)送出去之前會(huì)進(jìn)行一次攔截，自動(dòng)給我們的請(qǐng)求設(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請(qǐng)求默認(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

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

3.Required request part ‘files’ is not present

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

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)生這個(gè)報(bào)錯(cuò)是因?yàn)镃ontent-Type 不是’multipart/form-data’ ，但是無法通過RequestParam方法獲得formdata中的數(shù)據(jù)（接收和傳入的參數(shù)不是文件類型）。

總結(jié)

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

最新評(píng)論