如何一个接一个地使用ajax上传多个文件？一个文件完成上传后开始上传下一个文件？答案

【问题标题】：how to upload multiple files using ajax one after another? after one file completes uploading start uploading the next?如何一个接一个地使用ajax上传多个文件？一个文件完成上传后开始上传下一个文件？
【发布时间】：2022-07-25 20:53:55
【问题描述】：

我有一个文件数组。我想向 API 发出 post 请求以一个接一个地上传文件。尝试了很多，但无法使任何工作。后端一次处理单个文件上传。代码是这样的-

function onDropUpload(event){
    let entries= event.dataTransfer.items;
    let f = new FormData();
    async uploadfile(file){
         let response = await axios.post('/',file, {headers: {'Content-Type': 'multipart/form-data'}})
         resolve(response);
    }
    for (let i = 0; i < entries.length; i++) {
         f.append('file_to_save', entries[i]);
         uploadfile(f);
         f.delete('file_to_save');
    }
}

实施可能远非如此（这只是为了说明这个想法）。但问题是，我想在解决上一个文件的上传承诺后开始上传文件。

【问题讨论】：

标签： ajax asynchronous file-upload promise axios

【解决方案1】：

您应该为每次上传使用一个新的 FileData 对象

function onDropUpload(event){
    let entries= event.dataTransfer.items;
    async uploadfile(file){
         let response = await axios.post('/',file, {headers: {'Content-Type': 'multipart/form-data'}})
         resolve(response);
    }
    for (let i = 0; i < entries.length; i++) {
         let f = new FormData();
         f.append('file_to_save', entries[i]);
         uploadfile(f);
    }
}

【讨论】：