使用FormGroup提交表单时FormData追加对象转字符串无法解析问题

问题根本原因 #

FormData接口的append()/set()方法仅支持传入字符串、Blob、File三种类型的值，传入其他类型都会自动调用其toString()方法转为字符串，所以你直接传入对象会被转为[object Object]这类无效字符串，且FormData本身就不支持存储非上述三类的原始对象类型，不可能直接在FormData里保留JS对象格式。

可行解决方法 #

方案1：JSON序列化传输（最常用，改造成本最低） #

传输前将对象转为JSON字符串，后端接收后再反序列化为对象即可：

Object.keys(this.Form.controls).forEach(key => {
  if(key == 'users'){
    // 先序列化为JSON字符串再加入FormData
    formData.append(key, JSON.stringify(this.Form.get(key).value));
  }
});

后端拿到users字段值后，直接调用对应语言的JSON反序列化方法即可得到原始结构的对象/数组。

方案2：扁平化展开为结构化键值对 #

如果你使用的后端框架支持自动解析表单嵌套结构（如Spring MVC、Express、Django等），可以写个递归函数将嵌套对象展开为带层级标识的键，逐个加入FormData：

// 递归添加嵌套字段到FormData
function appendNested(formData, parentKey, value) {
  if (Array.isArray(value)) {
    value.forEach((item, index) => {
      appendNested(formData, `${parentKey}[${index}]`, item);
    });
  } else if (typeof value === 'object' && value !== null && !(value instanceof Blob) && !(value instanceof File)) {
    Object.keys(value).forEach(key => {
      appendNested(formData, `${parentKey}.${key}`, value[key]);
    });
  } else {
    formData.append(parentKey, value);
  }
}

// 调用
if(key == 'users'){
  appendNested(formData, key, this.Form.get(key).value);
}

提交后后端会自动将users[0].employee、users[0].position这类键解析为嵌套的对象数组，不需要手动反序列化。

原有代码错误说明 #

你直接把对象传入append()后，值已经被转为[object Object]这类非JSON格式的字符串，此时再调用JSON.parse()必然会报格式错误，且FormData本身不支持存储对象类型，所以后续的set操作也不可能把值转回对象类型。

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