axios上传文件错误：Current request is not a multipart request

最新推荐文章于 2024-09-07 18:30:42 发布

银河系银桑

最新推荐文章于 2024-09-07 18:30:42 发布

阅读量1.4k

点赞数 1

文章标签：前端 javascript vue.js

本文链接：https://blog.youkuaiyun.com/weixin_40293364/article/details/129809888

版权

vue中使用axios上传图片，使用FormData数据格式携带图片信息，后端返回Current request is not a multipart request

查看请求头发现 'Content-Type'：'application/json'

添加axios请求头'Content-Type'：'multipart/form-data'，后仍旧报错 the request was rejected because no multipart boundary was found

猜测axios没有识别正确的FormData格式，后证实发现确实是axios请求头问题。请求发送前会做一次拦截，将自动添加一些请求头设置，做删除content-type请求头操作，让浏览器自动识别请求内容类型

let formData = new FormData();
formData.append('uploadFile',file);
formData.append('data',JSON.stringify(this.form));
axios({
      url: '//',
      method: 'post',
      data: formData,
      transformRequest: [function (data, headers) {
          delete headers.post['Content-Type']
          return data;
      }]
  }).then(()=>{})

后端接收

@ResponseBody
@PostMapping("submit")
public Response submit(@Nullable @RequestPart("uploadFile") MultipartFile file, @RequestParam("data") String data) throws Exception {
    
    }