React如何通过FormData发送嵌套对象数组及图片到Node.js后端

你遇到的报错原因是 FormData 的 append() 方法仅支持直接传入字符串、Blob/File 类型的参数，直接传入对象/数组会被默认调用 toString() 方法转为 [object Object] 格式，无法被后端正常解析。
下面给两种主流的落地实现方案：

方案一：JSON序列化结构化数据（推荐，改动最小） #

把除了文件之外的所有结构化数据整体序列化为JSON字符串，作为单个字段传入FormData，后端拿到后反序列化即可得到完整的对象结构。

前端实现代码 #

// 1. 先把表单数据处理成符合接口要求的格式
const submitData = {
  employee: "user", // 这里按你的业务逻辑填对应值
  positionHeld: formData.positionHeld,
  address: formData.address,
  // 把responsibilities字符串转成数组，分割规则可按你的业务逻辑调整
  responsibilities: formData.responsibilities.split(",").map(item => item.trim())
}
// 2. 构造FormData
const completeFormData = new FormData()
// 序列化结构化数据
completeFormData.append("data", JSON.stringify(submitData))
// 追加文件
completeFormData.append("image", fileData)
// 3. 发送请求注意：不要手动设置Content-Type请求头，浏览器会自动生成带boundary的multipart/form-data头
axios.post("/你的接口地址", completeFormData)

后端（Node.js）处理示例 #

以常用的multer文件处理中间件为例：

const multer = require('multer')
const upload = multer({ dest: 'uploads/' }) // 配置文件存储路径

app.post('/你的接口地址', upload.single('image'), (req, res) => {
  // 反序列化得到结构化数据
  const bizData = JSON.parse(req.body.data)
  // req.file 就是上传的图片文件
  console.log(bizData.positionHeld, req.file)
  // 后续业务逻辑
})

方案二：按嵌套规则展开字段 #

如果后端要求不能把数据打包序列化，也可以按照FormData的嵌套字段命名规则，把数组、对象展开为带索引的字段名，后端配置支持嵌套解析的中间件即可直接拿到结构化数据。

前端实现代码 #

const completeFormData = new FormData()
// 追加基础字段
completeFormData.append("employee", "user")
completeFormData.append("address", formData.address)
// 追加positionHeld对象数组
formData.positionHeld.forEach((item, index) => {
  completeFormData.append(`positionHeld[${index}].yearPostitionHeld`, item.positionHeldYear)
  completeFormData.append(`positionHeld[${index}].positionHeldTitle`, item.positionHeldTitle)
})
// 追加responsibilities数组
const resArr = formData.responsibilities.split(",").map(item => item.trim())
resArr.forEach((item, index) => {
  completeFormData.append(`responsibilities[${index}]`, item)
})
// 追加文件
completeFormData.append("image", fileData)

后端配置要求 #

需要把body-parser的extended参数设为true，即可自动解析嵌套结构：

app.use(express.urlencoded({ extended: true }))

额外注意点 #

• 你之前的onChange方法只能处理一层字段的更新，要修改positionHeld这种嵌套数组的内容，需要单独写对应的处理方法，按索引更新对应数组项的值
• 发送请求时不要手动设置Content-Type: multipart/form-data，否则会丢失boundary参数，导致文件解析失败

内容的提问来源于stack exchange，提问作者Bernard Bonjo Thompson