如何通过FormData发送携带文件的对象数组并通过Axios提交到Express后端

你遇到的空body问题由两个核心错误导致：

1. 直接将对象数组append到FormData时，FormData会自动调用toString()方法将内容转为[object Object]这类无效字符串，后端无法正常解析
2. Express 内置的express.json()、express.urlencoded()中间件仅支持解析application/json和x-www-form-urlencoded类型的请求，不支持multipart/form-data格式的文件上传请求，未加对应解析中间件时req.body默认为空

你需要将非文件的元数据转为JSON字符串提交，文件单独按索引关联追加到FormData中，示例代码如下：

typeForm() {
  const fd = new FormData();
  // 1. 提取非文件元数据，转JSON字符串提交
  const traitementsMeta = traitementsListe.map(item => {
    const { files, ...rest } = item;
    return rest;
  })
  fd.append('traitementsMeta', JSON.stringify(traitementsMeta))

  // 2. 逐个追加文件，用key中的索引关联对应的治疗项
  traitementsListe.forEach((treatItem, treatIndex) => {
    treatItem.files.forEach((fileObj, fileIndex) => {
      // 此处根据你使用的上传组件调整，拿到原生File对象即可，比如Dropzone组件的真实文件存放在fileObj.file中
      const realFile = fileObj.upload.file || fileObj
      fd.append(`treatFiles_${treatIndex}_${fileIndex}`, realFile, realFile.name)
    })
  })

  if(traitementsListe.length > 0) {
    axios.post(`${baseUrl}addOldfolder`, fd, {
      // 不需要手动设置Content-Type，浏览器会自动生成带boundary的正确值，拦截器不要覆盖该请求头即可
    }).then(response => {
      console.log(response)
      return response.data;
    }).catch(error => ({ error: JSON.stringify(error) }));  
  }
}

需要安装Express官方推荐的multipart请求解析中间件multer，配置后即可正常拿到请求内容：

1. 先安装依赖：npm install multer
2. 接口修改为如下内容：

const multer = require('multer')
// 配置存储规则，内存存储适合小文件，大文件建议用磁盘存储
const storage = multer.memoryStorage()
const upload = multer({ storage: storage })

// 加入multer中间件解析请求
router.post('/addOldfolder', upload.any(), async(req,res) =>{
  try {
    // 解析元数据
    const traitementsListe = JSON.parse(req.body.traitementsMeta)
    // 所有上传的文件存放在req.files数组中，可通过fieldName中的索引关联到对应治疗项
    const uploadFiles = req.files
    console.log('治疗列表：', traitementsListe)
    console.log('上传文件：', uploadFiles)
    res.send({ traitementsListe, uploadFiles })
  } catch(err){
    res.status(400).send(err);
  }
})

• 如果文件体积较小，也可以直接将文件转为Base64字符串放在普通JSON请求中提交，无需使用FormData，但Base64会增大30%左右的体积，大文件不推荐
• 不要手动指定FormData请求的Content-Type头，手动设置会丢失浏览器自动生成的boundary参数，导致后端解析失败

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