React JS中如何在Form Data内传递对象数组？

架构老林

2026-10-1

问题原因

FormData的append()方法仅支持传入字符串、Blob、File类型作为值，你直接传入对象数组的话，JS会自动调用数组的toString()方法，最终就会变成[object Object],[object Object]这类无意义的字符串，后端自然无法解析得到null。

解决方案1：序列化数组为JSON字符串（最简单）

如果后端可以适配处理JSON格式的参数值，且数组中不包含文件/二进制字段，直接把对象数组用JSON.stringify()序列化后再传入FormData即可：

const onSubmit = async () => {
  const data = new FormData();
  // 序列化数组为JSON字符串
  data.append("SurveyAnswers", JSON.stringify(answers));
  const res = await executeAddSurveyFormAnswers({ data: data });     
  console.log('response', res);
}

后端只需要把接收到的SurveyAnswers字符串做JSON反序列化就能拿到原始数组。
注意：如果数组中包含File/Blob类型的字段，该方案不适用，JSON序列化会丢失文件数据，请使用方案2

解决方案2：遍历数组逐个拼接表单键名（兼容文件上传）

如果后端要求标准表单数组格式，或者数组中包含文件字段，需要遍历数组的每一项，再遍历每一项的属性，按照数组名[索引].属性名的格式拼接键名，逐个append到FormData中：

const onSubmit = async () => {
  const data = new FormData();
  // 遍历对象数组
  answers.forEach((item, index) => {
    // 遍历每个对象的属性
    Object.entries(item).forEach(([key, value]) => {
      data.append(`SurveyAnswers[${index}].${key}`, value);
    })
  })
  const res = await executeAddSurveyFormAnswers({ data: data });     
  console.log('response', res);
}

这个方案可以正常保留File类型的字段，符合绝大多数后端表单数组的解析规则，你用Postman发请求能成功本质上也是Postman自动帮你做了这个键名拼接的处理。