从表单获取数据时req.body为undefined 同代码其他应用可正常运行

问题背景 #

一段在其他应用可正常运行的代码，在当前项目处理表单提交时出现req.body为undefined的情况，导致addEmployee方法无法执行。相关代码及控制台输出如下：

HTML代码

<form action="/employees/add" method="POST" enctype="multipart/form-data">
  <div class="form-group">
    <label for="first_name">First Name</label>
    <input name="first_name" type="text" class="form-control" id="first_name" value="first_name" placeholder="Please enter your first name">
  </div>
  <div class="form-group">
    <label for="last_name">Last Name</label>
    <input name="last_name" type="text" class="form-control" id="last_name" value="last_name" placeholder="Please enter your last name">
  </div>
</form>

Server.js代码

app.post('/employees/add', (req, res) => {
  data.addEmployee(req.body).then(() => {
    console.log(req.body);
    res.redirect('/employees');
  });
});

控制台输出

Server running 8080
undefined

用户已尝试调整app.use(express.static...)配置，但问题未解决。

解决方案 #

出现这个问题的核心原因是：表单设置了enctype="multipart/form-data"，而Express默认的express.urlencoded中间件无法解析这种类型的请求体，必须使用专门的中间件，或者移除该enctype属性。

方案1：移除表单的enctype属性（适用于无文件上传的场景）

1. 修改HTML表单，删除enctype="multipart/form-data"：

<form action="/employees/add" method="POST">

2. 在Server.js开头添加Express的urlencoded中间件配置（需放在路由配置之前）：

app.use(express.urlencoded({ extended: true }));

方案2：使用multer解析multipart/form-data请求（适用于有文件上传的场景）

1. 安装multer依赖：

npm install multer

2. 在Server.js中配置multer并在路由中使用：

const multer = require('multer');
// 仅解析文本字段，不存储上传文件
const upload = multer().none();

// 在路由中添加upload中间件
app.post('/employees/add', upload, (req, res) => {
  data.addEmployee(req.body).then(() => {
    console.log(req.body);
    res.redirect('/employees');
  });
});

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