Angular循环调用HTTP Post上传多文件时重复传参问题求助

你遇到的核心问题是复用了同一个FormData实例进行多次上传请求。FormData的append()方法是向对象中累加数据，而非清空后重新添加。第一次请求时你添加了bindArray[0]的file和title，第二次循环又往同一个FormData里追加bindArray[1]的参数，最终第二个请求的FormData里会包含两个file和两个title字段，服务器自然无法正确解析，导致请求失败。

另外，你的bindArray构建逻辑存在冗余嵌套循环，虽然最终能得到目标数组，但没必要这么写，反而增加了出错概率。

1. 每次上传请求创建独立的FormData实例 #

把new FormData()移到上传循环内部，确保每一次请求都使用干净的、仅携带当前文件和对应标题的FormData对象。

2. 简化bindArray的构建逻辑 #

去掉不必要的嵌套循环，直接遍历文件数组和标题数组，一对一绑定即可。

upload(docType) {
  if (this.files.length > 0) {
    const bindArray = [];
    // 简化bindArray构建，移除冗余嵌套循环
    for (let i = 0; i < this.files.length; i++) {
      const file = this.files[i];
      // 可选链操作符避免titleArray[i]不存在时报错
      const title = this.titleArray[i]?.title || '';
      this.imageNameArray.push(file.name);
      bindArray.push({ file, title });
    }

    // 遍历bindArray，每次循环新建FormData
    for (let k = 0; k < bindArray.length; k++) {
      const { file, title } = bindArray[k];
      // 关键：每次请求都创建全新的FormData
      const formData = new FormData();
      formData.append('file', file, file.name);
      formData.append('title', title);

      this.doctorService.uploadDocuments(formData, docType)
        .subscribe(response => {
          console.log(`文件 ${file.name} 上传成功`, response);
        }, err => {
          console.log(`文件 ${file.name} 上传失败`, err);
        });
    }
  }
}

如果上传的文件数量较多，并发请求可能会给服务器造成压力，或因浏览器并发限制导致请求排队。这种情况下可以改成串行上传，用async/await配合RxJS工具依次发送请求：

import { lastValueFrom } from 'rxjs';

async upload(docType) {
  if (this.files.length > 0) {
    const bindArray = [];
    for (let i = 0; i < this.files.length; i++) {
      const file = this.files[i];
      const title = this.titleArray[i]?.title || '';
      this.imageNameArray.push(file.name);
      bindArray.push({ file, title });
    }

    // 串行上传，逐个处理文件
    for (const item of bindArray) {
      const { file, title } = item;
      const formData = new FormData();
      formData.append('file', file, file.name);
      formData.append('title', title);

      try {
        const response = await lastValueFrom(this.doctorService.uploadDocuments(formData, docType));
        console.log(`文件 ${file.name} 上传成功`, response);
      } catch (err) {
        console.log(`文件 ${file.name} 上传失败`, err);
      }
    }
  }
}

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