ExpressJs处理multipart/form-data请求时数组对象字段变为空字符串如何解决

核心原因 #

• 前端手动设置multipart/form-data请求头缺少边界标识
  浏览器发送FormData类型的请求时，会自动生成带boundary字段的Content-Type头，用来标记请求中不同字段的分隔边界。手动设置该头会覆盖浏览器的自动行为，导致缺少边界标识，后端multer无法正确解析字段，最终得到空字符串。
• 前端FormData.append传递数组的方式错误
  FormData的append方法仅支持字符串、Blob、File类型的参数，直接传入数组会触发隐式类型转换，无法正确传递数组结构。
• 后端multer默认不会自动解析复合类型
  multer处理multipart/form-data请求时，非文件字段默认只会解析为纯字符串，不会自动转换为数组、对象等复合类型。

具体修复方案 #

前端修改 #

1. 移除手动设置的Content-Type请求头，交由浏览器自动生成
2. 数组类型字段传递从以下两种方案中二选一：
   方案一：逐个追加数组元素，字段名加[]后缀

   const occupations = ['one', 'two', 'three']
   occupations.forEach(item => {
     data.append('occupations[]', item)
   })
   

   该方案后端直接通过req.body.occupations就能拿到数组类型的结果。
   方案二：将复合类型序列化后传递

   data.append('occupations', JSON.stringify(occupations))
   

   后端拿到字段后调用JSON.parse(req.body.occupations)即可得到原数组。

后端注意事项 #

express.json和express.urlencoded中间件仅能处理application/json、application/x-www-form-urlencoded类型的请求，无法处理multipart/form-data类型的请求，该类型请求的解析已经由multer负责，无需额外配置。

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