使用express.urlencoded时formidable的form.parse无数据且文件识别异常如何解决

问题根因 #

1. express.urlencoded() 中间件的作用是解析 application/x-www-form-urlencoded 类型的请求体，它会提前消费完请求的可读流，后续 form.parse() 读取 req 时已经没有可用数据，所以不会触发回调。
2. 移除中间件后文件字段出现在 fields 而非 files 中，是因为前端提交表单时没有设置正确的 enctype 属性，文件被当成普通文本字段传输，formidable 无法识别为上传文件。

解决步骤 #

• 不要全局挂载 express.urlencoded() 中间件，改为路由级挂载，仅给不需要文件上传的普通表单接口启用：

  // 移除全局的 app.use(express.urlencoded({ extended: true }))
  // 仅给不需要上传的接口单独挂载
  app.post('/normal-submit', express.urlencoded({ extended: true }), (req, res) => {
    console.log(req.body) // 可以正常获取普通表单字段
  })
  

• 前端提交文件的表单必须添加 enctype="multipart/form-data" 属性：

  <form action="/" method="post" enctype="multipart/form-data">
    <input type="text" name="title">
    <input type="file" name="myfile">
    <button type="submit">提交</button>
  </form>
  

  如果是用axios/fetch等接口请求，直接传递FormData对象即可，不需要手动设置Content-Type，浏览器会自动生成带边界标识的正确请求头。
• 补全formidable的基础配置，确保文件正常存储：

  app.post('/', (req, res) => {
    const form = new formidable.IncomingForm();
    const uploadfolder = path.join(__dirname, 'static/uploads')
    // 配置上传参数
    form.uploadDir = uploadfolder; // 指定文件存储目录
    form.keepExtensions = true; // 保留原始文件后缀
    form.parse(req, function (err, fields, files) {
      if (err) {
        console.error('解析错误:', err)
        return res.status(500).send('上传失败')
      }
      console.log('普通字段：', fields) // title、blogspace等字段在这里
      console.log('文件对象：', files.myfile) // 上传的文件对象在这里，包含路径、大小、原名等信息
      res.send('上传完成')
    })
  })
  

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