亲宝软件园·资讯

展开

axios上传文件错误:Current request is not a multipart request解决

obscure mood 人气:0

报错信息

其实整个过程我一共经历了三个报错信息,分别是

1.Current request is not a multipart request:当前请求不是multipart 请求

2.the request was rejected because no multipart boundary was found:请求被拒绝,因为未找到多部分边界

3.Required request part ‘files’ is not present

报错产生的程序

我是想在vue中实现一个上传文件的功能,采用axios方式上传,数据模式采用formdata。

然后就产生了各种错误。

错误解决

Current request is not a multipart request:

这个错误是因为后端读取MultipartFile 类型数据时,对申请头的类型进行了一个判断,他只识别 multipart 开头的 Content-Type。所以我们需要修改headers 的 Content-Type。

但是手动添加headers会产生 第二个错误。所以建议使用formdata 的方式,参数为formdata 时,浏览器会自动添加一个标准的headers。

错误:会引发新的错误

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)})

当然要保证format的key要和后端接收参数的名称保持一致,不然会引发第三个错误。
(对了,正常 let format = new FormData();就可以,但一些vue情况下可能会报错找不到FormData ,就可以试试new window.FormData();)

新的问题

正常情况下此时浏览器会自动修改headers的Content-Type,但是我的请求头的类型依旧没有变化,经过进一步研究,发现axios在请求发送出去之前会进行一次拦截,自动给我们的请求设置一些参数。所以我们需要修改一下不让它在修改。最重结果为

	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请求默认的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

这是因为正常的 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键不相同,修改为相同就好。

其他还有可能是前端传参问题,参数可能并没有传送到后端,或者也可能是因为Content-Type的不同导致读取文件方式不同。

我产生这个报错是因为Content-Type 不是’multipart/form-data’ ,但是无法通过RequestParam方法获得formdata中的数据(接收和传入的参数不是文件类型)。

总结

加载全部内容

相关教程
猜你喜欢
用户评论