如何通过Ajax实现多文件依次上传？上一个完成后再传下一个

你的核心需求是按顺序逐个上传文件，上一个文件上传完成后再启动下一个，原代码的问题主要在于没有正确等待异步操作完成，且FormData复用导致数据混乱，还有对DataTransferItem的处理有误。

原代码的问题点 #

• uploadfile函数语法错误，且未正确返回Promise
• 循环中直接调用uploadfile但不等待其完成，导致所有请求并发发起
• 复用同一个FormData对象，异步操作下会出现数据覆盖
• 未将DataTransferItem转换为实际的File对象就上传

正确实现方案 #

async function onDropUpload(event) {
  event.preventDefault(); // 阻止默认拖拽行为
  
  // 将DataTransferItem转换为File数组，过滤非文件项
  const files = Array.from(event.dataTransfer.items)
    .map(item => item.getAsFile())
    .filter(file => file !== null);

  // 单个文件上传函数
  async function uploadFile(file) {
    const formData = new FormData();
    formData.append('file_to_save', file);
    
    // axios会自动处理multipart/form-data请求头，无需手动设置
    const response = await axios.post('/', formData);
    return response;
  }

  // 按顺序逐个上传
  for (const file of files) {
    try {
      const response = await uploadFile(file);
      console.log(`文件 ${file.name} 上传成功`, response);
    } catch (error) {
      console.error(`文件 ${file.name} 上传失败`, error);
      // 可选：遇到错误是否继续上传下一个，此处选择继续；若要终止则直接throw error
    }
  }
}

关键说明 #

• 转换文件列表：event.dataTransfer.items是DataTransferItem集合，必须通过getAsFile()获取实际的File对象，否则无法正确上传
• 逐个等待上传：使用for...of循环配合await，确保每一个文件上传完成后再执行下一次循环
• 独立FormData：每个上传请求单独创建FormData，避免复用导致的数据冲突
• axios配置：无需手动设置Content-Type: multipart/form-data，axios会自动根据FormData生成包含boundary的正确请求头，手动设置反而可能导致请求失败

内容的提问来源于stack exchange，提问作者Yasir