axios+formdata 上传文件

时间:2025-04-05 08:44:43

最近项目要做文件上传,作为萌新表示这种操作有点鸭梨,知之为知之不知百度知,好吧百度说formdata 好那我们就动手了

首先照着formdata文档来先new 一个对象

let formData = new FormData()
('xxx', 'yyyyy')
跑一遍没报错,好像是可以的,但是就是console直接打印是空的,看文档说要这么干:

(('xxx'))

 

由于业务需要,axios配置了拦截器,在里面做了数据处理

(function (config) {
    // 在发送请求之前做了坑爹的数据处理
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return (error);
  });
这个数据把我们的数据类型变成了Object,so,浏览器给出的是application/json,

解决办法1:

就是 重新creat一个纯净的axios请求,挂载到vue原型里,然后重新请求,这个时候发现请求成功,后台也接收到文件数据,完美!!

解决办法2:

processData:false // 告诉axios不要去处理发送的数据(重要参数)

let formData = new FormData()
('file',[0])
this.$axios({
    url:url,
    method: 'post',
    data: formData,
    processData: false,// 告诉axios不要去处理发送的数据(重要参数)
    contentType: false,   // 告诉axios不要去设置Content-Type请求头
}).then((res)=>{
    (res)
})