Angular通过HttpClient提交FormData数组时服务端收不到数据如何解决

问题原因 #

• 全局仅创建了1个FormData实例，循环中所有对象的字段都追加到同一个实例中，且newArray存储的是同一个FormData的引用，完全没有实现每个对象对应独立数据的效果
• 直接提交FormData类型的数组，Angular HttpClient无法正确序列化该格式，服务端完全无法识别请求结构
• 多个对象的同名字段（比如两个对象都有name、image）直接append到FormData会导致字段冲突，服务端只能拿到最后一个对应值，或者直接解析失败
• 若image字段实际是文件对象，当前代码传的是字符串路径，也会导致文件字段失效（如果是已上传的路径字符串可忽略该条）

修复方案 #

根据业务需求选对应方案即可：

方案1：单请求提交整个商品数组（推荐，大多数场景适用） #

仅使用一个FormData实例，用带索引的字段名标识数组的不同元素，请求时直接传FormData不要外层套数组，注意不要手动设置Content-Type请求头，Angular会自动生成带boundary的正确头信息。
处理数据代码：

// 仅声明一个FormData实例
const formData = new FormData();

// 遍历旧数组，给字段加上索引标识
for (let i = 0; i < oldArray.length; i++) {
  const product = oldArray[i];
  for (const key of Object.keys(product)) {
    const value = product[key];
    // 字段名格式：products[索引].字段名，和服务端接收的数组参数名对应即可
    formData.append(`products[${i}].${key}`, value);
  }
}

请求代码：

// 直接传formData，不要套数组
this.productService.addProductsArray(formData).pipe(first())
  .subscribe(
    (data: any) => {
      if (data) {
        alert('successful');
      }
    });

服务端对应适配：声明名为products的数组类型接收参数即可，数组元素结构和提交的对象字段完全对应。 #

方案2：无文件上传需求时直接提交JSON数组 #

如果你的图片字段都是已上传的路径字符串，不需要传二进制文件，完全不需要用FormData，直接提交原始数组即可，代码更简单：

this.productService.addProductsArray(oldArray).pipe(first())
  .subscribe(
    (data: any) => {
      if (data) {
        alert('successful');
      }
    });

方案3：每个商品单独提交 #

如果业务要求每个商品单独发请求，在循环内创建新的FormData实例即可：

for (const product of oldArray) {
  // 每次循环创建新的FormData实例
  const formData = new FormData();
  for (const key of Object.keys(product)) {
    formData.append(key, product[key]);
  }
  this.productService.addSingleProduct(formData).pipe(first()).subscribe();
}

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