位置: IT常识 - 正文
axios上传文件错误：Current request is not a multipart request(axios提交文件)
发布时间：2024-01-07推荐整理分享axios上传文件错误：Current request is not a multipart request(axios提交文件)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:文件上传过程中出现i/o错误,上传文件报错,上传文件io错误是什么意思,axios提交文件,上传文件显示io错误,axios提交文件,上传文件报错,上传文件报错,内容如对您有帮助，希望把文章链接给更多的朋友！
其实整个过程我一共经历了三个报错信息，分别是 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中的数据（接收和传入的参数不是文件类型）。
上一篇：阿尔瓦拉辛，西班牙 (© Domingo Leiva/Getty Images)(阿尔瓦罗西萨)
下一篇：【2023-Pytorch-检测教程】手把手教你使用YOLOV5做电线绝缘子缺陷检测
