axios传 file文件（多文件上传）

siwangdexie_new

于 2020-11-08 21:49:47 发布

阅读量9k

点赞数 8

分类专栏：技巧类

本文链接：https://blog.youkuaiyun.com/siwangdexie_copy/article/details/109565599

版权

技巧类专栏收录该内容

15 篇文章

订阅专栏

在Vue CLI 4环境下，利用axios上传文件时，需借助formData来处理。本文提供相关代码示例，展示如何实现多文件上传。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码背景：
vue cli 4
“axios”: “^0.21.0”,
传file文件的时候，需要用formData
代码只是说明，仅供参考

let formDatas = new FormData();
//多文件上传的时候，通过遍历来追加file给表单
//编辑状态的话，就传url，新增状态，就传file格式文件
this.filelist.forEach((i,index)=>{
   if(i.raw){
     formDatas.append("file[]",i.raw);
   }else{
     formDatas.append("file[]",i.url);
   }        
 });
 for(let key in this.ruleForm){
   formDatas.append( key,this.ruleForm[key] );
 };
this.$axios({
    method: "POST",
    url: url,
    headers: {
      'Content-Type': "multipart/form-data",
    },
    //这部分非常重要，否则formdata会被转格式
    transformRequest: [function(){
        return formDatas;
    }],
    data: formDatas,
    params: formDatas,
})
.then(res => {

})
.catch(err => {
  console.log(err);
});