使用HTML表单时Multer中req.files为undefined的问题排查

核心原因：表单缺少enctype="multipart/form-data"属性 #

HTML表单默认编码类型为application/x-www-form-urlencoded，这种格式无法传输文件数据。只有显式设置enctype="multipart/form-data"，浏览器才会以正确的二进制格式传递文件，后端的文件解析中间件（如multer）才能识别并填充req.files（或req.file）。

修复后的表单示例 #

<form action="/upload" method="POST" enctype="multipart/form-data">
  <input type="file" name="file">
  <button type="submit">上传</button>
</form>

额外排查点（若上述修复无效） #

• 核对后端中间件配置：使用multer时，要注意方法匹配——如果是单文件上传用upload.single('file')，后端需取req.file而非req.files；多文件上传用upload.array('files', 5)或upload.fields(...)才会生成req.files。示例代码：

  const multer = require('multer');
  const upload = multer({ dest: 'uploads/' });
  // 单文件上传
  app.post('/upload', upload.single('file'), (req, res) => {
    console.log(req.file);
  });
  // 多文件上传
  app.post('/uploads', upload.array('files', 3), (req, res) => {
    console.log(req.files);
  });
  

• 确认表单请求方法为POST：文件上传仅支持POST请求，GET无法携带文件数据。
• 检查表单action路径与后端路由是否完全一致：路径不匹配会导致请求未经过文件解析中间件，进而出现req.files为undefined。

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