vue3+elementPlus项目，组件如何一个axios发送多个文件流

原创于 2021-04-27 17:17:07 发布

· 509 阅读

0 ·

版权

文章标签：

#vue

Vue 同时被 3 个专栏收录

23 篇文章

订阅专栏

elementPlus

4 篇文章

订阅专栏

axios

2 篇文章

订阅专栏

本文介绍了如何在axios中使用原生FormData对象一次性提交多个文件流，解决Element Plus el-upload组件上传限制问题，通过循环逐个添加文件并附带其他参数进行POST请求。

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

如何一个axios发送多个文件流

这个解决方案我使用的原生方法：

背景：使用elementPlus组件（el-upload）提交的时候存在问题（无法一个axios提交多个文件流）,所以想到了原生的方式；

记录一下：

//省略其他
...
let formData = new FormData();
let files = document.querySelector('.el-upload__input').files;
for(let i = 0; i < files.length;i++){
    formData.append("file", files[i]);
}
formData.append("param", JSON.stringify(this.param));
formData.append("sessionID", store.state.sessionID);
axios({
    method: 'post',
    url: 'url',
    headers:{
        'Content-Type':'multipart/form-data'
    },
    data: formData
}).then(res => {
    if (res.data.state == '1') {
        this.$message({
            type: 'success',
            message: '操作成功'
        });
    } else {
        console.warn(res.data.message);
    }
});
...someThing...

ps:再补充下:

//省略其他
...
//this.file 这里的 file 是定义在 data 或者 setup里面 用于el-upload组件
let formData = new FormData();
let files = this.file;
for(let i = 0; i < files.length;i++){
    formData.append("file", files[i].raw);
    //files[i].raw 替代上面 input=》files
}