NodeJS标准上传表单文件字段为空问题求助

云原生阿岚

2026-4-8

各位开发的小伙伴们，我最近在做NodeJS Express框架下的文件上传功能，照着相关教程一步步写的代码，结果遇到了个头疼的问题——后端完全拿不到上传的文件，req.files一直是undefined！

我目前写的mre.js代码是这样的（粘贴的时候不小心截断了，视图目录配置那部分没写完）：

'use strict';  
const path = require('path'); 
const express = require('express'); 
const app = express();  

// Set up the view engine 
app.set('view engine', 'pug'); 
app.set('views', path.j

我已经在前端表单里设置了enctype="multipart/form-data"，请求方法也是POST，但不管怎么测试，后端就是获取不到文件字段，试了好几种调整都没效果，有没有大佬能帮我找找问题出在哪？

同时我也整理了几个查资料后觉得可能的解决方向，方便其他遇到同样坑的朋友参考：

Express 4.x版本之后已经移除了内置的文件上传处理中间件，原来的bodyParser()和multipart()都不能用了，必须安装专门的文件解析工具，比如官方推荐的multer，没装的话肯定拿不到文件。
一定要检查前端表单的两个关键属性：method必须是POST，enctype必须是multipart/form-data，少一个都不行，普通的表单编码格式是处理不了文件上传的。
如果已经装了multer，要确认中间件配置和路由绑定是否正确：比如表单里的文件输入框name属性是myFile，那路由里就要用upload.single('myFile')这种方式指定对应字段名，字段名不匹配的话也会拿不到文件。
别用express.json()或者express.urlencoded()来解析文件上传的请求，这俩只处理普通表单或JSON数据，会干扰multipart类型的请求解析。

给大家贴一个完整的可运行示例参考：
首先安装依赖：

npm install express pug multer

完整的mre.js代码：

'use strict';  
const path = require('path'); 
const express = require('express'); 
const multer = require('multer');
const app = express();  

// 配置multer，指定文件临时存储目录，注意要自己创建uploads文件夹
const upload = multer({ dest: path.join(__dirname, 'uploads') });

// 配置视图引擎和目录
app.set('view engine', 'pug'); 
app.set('views', path.join(__dirname, 'views'));

// 渲染上传表单页面
app.get('/', (req, res) => {
  res.render('upload');
});

// 处理单文件上传，这里的'myFile'对应表单里文件输入框的name属性
app.post('/upload', upload.single('myFile'), (req, res) => {
  // 成功的话req.file里就是上传的文件信息
  if (!req.file) {
    return res.send('请选择要上传的文件！');
  }
  console.log('文件信息：', req.file);
  res.send(`文件上传成功！文件名：${req.file.originalname}`);
});

// 启动服务器
app.listen(3000, () => {
  console.log('服务器已启动，访问 http://localhost:3000 上传文件');
});

然后在项目根目录创建views文件夹，里面新建upload.pug模板：

html
  head
    title 文件上传测试
  body
    h1 上传文件到NodeJS服务器
    form(method="POST", enctype="multipart/form-data", action="/upload")
      input(type="file", name="myFile" required)
      br
      button(type="submit", style="margin-top:10px;") 确认上传

我自己试了这个示例是能正常拿到文件的，各位可以对照着自己的代码排查，希望能帮到和我一样踩坑的朋友！

内容来源于stack exchange