React+Nodejs如何实现表单数据与文件单次POST提交并解决解析异常

multipart/form-data 格式本身不支持原生嵌套JSON结构，multer 解析该类型请求时，只会将所有非文件字段解析为扁平的键值对，不会自动识别字段名中的.分隔符生成嵌套对象。你看到的[Object: null prototype]是multer生成的无原型普通对象，不属于解析错误，仅代表该对象未继承Object的默认原型方法，不影响正常取值。
你当前拿到的带.的key结构，本质是前端组装FormData时，直接将Formik嵌套表单的路径作为字段名追加到了FormData实例中，没有做结构化处理。

两种方案均可实现单次请求提交，优先选第一种，适配性更强、出错概率更低。

方案1：前端序列化表单值为单个字段（推荐） #

不要逐字段拆分嵌套表单值追加到FormData，直接将整个表单对象序列化为JSON字符串作为单个字段传递，后端反序列化即可拿到标准JSON结构，改动量最小：

• 前端组装FormData逻辑调整：

  const handleSubmit = async (values) => {
    const formData = new FormData()
    // 正常追加所有上传文件，多文件字段可循环append
    // 例：idCardFiles.forEach(file => formData.append('idCardFiles', file))
    // 例：resumeFile && formData.append('resume', resumeFile)
    
    // 将整个表单值序列化为JSON字符串，作为单个字段传入
    formData.append('formDataJson', JSON.stringify(values))
  
    // 直接发起单次POST请求，不需要手动设置Content-Type，浏览器会自动带multipart/form-data边界
    const res = await axios.post('/', formData)
  }
  

• 后端接收逻辑调整：

  // 路由配置，upload是你初始化的multer实例，根据实际文件字段配置single/array/fields
  app.post('/', upload.array('files'), (req, res) => {
    // 反序列化拿到标准嵌套表单对象，和你之前两次请求拿到的表单结构完全一致
    const formValues = JSON.parse(req.body.formDataJson)
    // req.files为上传的文件数组，正常走minIO上传、路径拼接、MongoDB存储逻辑即可
  })
  

  该方案支持任意深度的嵌套表单结构，不会出现字段名冲突问题，也不需要引入额外依赖。

方案2：后端转换扁平key为嵌套对象 #

如果不想调整前端提交逻辑，可以在后端加一层转换逻辑，将带.分隔的扁平key还原为嵌套对象：

• 实现代码：

  // 工具函数：将带点分隔的扁平对象转为嵌套对象
  const unflatten = (flatObj) => {
    const result = {}
    for (const [key, value] of Object.entries(flatObj)) {
      const keys = key.split('.')
      let cur = result
      keys.slice(0, -1).forEach(k => {
        cur[k] = cur[k] || {}
        cur = cur[k]
      })
      cur[keys.at(-1)] = value
    }
    return result
  }
  
  // 路由中使用
  app.post('/', upload.array('files'), (req, res) => {
    const parsedBody = unflatten(req.body)
    // parsedBody就是标准嵌套结构，可直接通过parsedBody.values.general_information.first_name取值
  })
  

  注意：如果你的表单字段名本身包含.字符，该方案会出现解析错误，不适合复杂表单场景。

• 不要在处理multipart/form-data请求的路由上挂载express.json()或express.urlencoded()中间件，会引发请求解析冲突。
• 无原型对象不需要额外转换，只要正常遍历、取值即可，和普通JS对象操作无差异。

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