如何将对象数组正确添加到FormData并以POST请求传递？

问题根源很直接：FormData的append方法如果接收非字符串/Blob类型的参数，会自动调用参数的toString()方法，对象转字符串就是[object Object]，所以直接把数组里的对象塞进去肯定不行。根据你的需求，给你三种可行方案：

方案一：直接发送JSON请求体（无文件上传时优先用） #

如果你的接口支持JSON格式的请求体，完全不用绕FormData，直接把数据包装成JSON字符串发送就行，简单又不易出错：

// 把formFields包装成要求的结构
const requestBody = { steps: formFields };

fetch('/你的接口地址', {
  method: 'POST',
  // 告诉后端请求体是JSON格式
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(requestBody),
});

方案二：将整个steps数组转为JSON字符串存入FormData #

如果必须用FormData（比如后续要上传图片文件），可以把整个formFields数组转成JSON字符串，再append到FormData中：

const formData = new FormData();
// 把数组转成JSON字符串后存入steps字段
formData.append('steps', JSON.stringify(formFields));

// 发送请求
fetch('/你的接口地址', {
  method: 'POST',
  body: formData,
});

这种方式需要后端配合，接收后把steps字段的值解析成JSON数组。

方案三：逐个append对象的每个属性（适合带文件的场景） #

如果你的image字段后续会是实际的文件对象，推荐用这种方式，后端通常能自动解析成数组结构：

const formData = new FormData();

formFields.forEach((item, index) => {
  // 用索引标识数组中的每个对象，逐个append属性
  formData.append(`steps[${index}][title]`, item.title);
  formData.append(`steps[${index}][description]`, item.description);
  formData.append(`steps[${index}][second_description]`, item.second_description);
  formData.append(`steps[${index}][step_number]`, item.step_number);
  
  // 如果image是文件对象，直接append即可（File属于Blob类型，FormData支持）
  if (item.image) {
    formData.append(`steps[${index}][image]`, item.image);
  }
});

// 发送请求
fetch('/你的接口地址', {
  method: 'POST',
  body: formData,
});

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