Express接口接收form-data时req.body为undefined问题求助

先来看你的server.js代码：

const fs = require("fs");
const express = require("express");
const bodyParser = require("body-parser");
const mysql = require("mysql");
const app = express();
const port = process.env.PORT || 5000;
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
const data = fs.readFileSync("./database.json");
const conf = JSON.parse(data);
const connection = mysql.createConnection({
  host: conf.host,
  user: conf.user,
  password: conf.password,
  port: conf.port,
  database: conf.database
});
connection.connect();
app.get("/api/users", (req, res) => {
  connection.query(
    "select * from users where isDeleted = 0",
    (err, rows, fields) => {
      res.send(rows);
      // console.log(err);
      // console.log(rows);
    }
  );
});
app.post("/api/users", (req, res) => {
  let sql = "insert into users values (null,?,?,now(),now(),0)";
  let name = req.body.name;
  let dsc = req.body.dsc;
  let params = [name, dsc];
  console.log(params);
  connection.query(sql, params, (err, rows, fields) => {
    res.send(rows);
    // console.log(err);
    // console.log(rows);
  });
});
app.delete("/api/users/:id", (req, res) => {
  let sql = "update users set isDeleted = 1 where id = ?";
  let params =[req.params.id];
  connection.query(sql,params, (err, rows, fields)=>{
    res.send(rows);
    // console.log(err);
    // console.log(rows);
  });
});
app.listen(port, () => console.log(`Listening on port http://localhost:${port}`));

问题原因 #

你当前只配置了body-parser来解析application/x-www-form-urlencoded和application/json格式的请求，但**body-parser并不支持解析multipart/form-data格式的请求**，所以发送form-data时req.body会一直是undefined。

解决方案 #

我们需要使用multer——Express生态中专门处理multipart/form-data的中间件，步骤如下：

1. 安装multer依赖 #

在项目根目录执行命令：

npm install multer

2. 修改server.js配置 #

引入并配置multer，同时修改POST接口的中间件：

const fs = require("fs");
const express = require("express");
const bodyParser = require("body-parser");
const mysql = require("mysql");
// 引入multer
const multer = require("multer");
const app = express();
const port = process.env.PORT || 5000;

// 配置multer：使用内存存储（不保存文件到磁盘），仅解析表单字段
const storage = multer.memoryStorage();
const upload = multer({ storage: storage });

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

// 其他数据库连接代码保持不变...

// 修改POST接口，添加upload.none()中间件解析form-data
app.post("/api/users", upload.none(), (req, res) => {
  let sql = "insert into users values (null,?,?,now(),now(),0)";
  let name = req.body.name;
  let dsc = req.body.dsc;
  let params = [name, dsc];
  console.log(params);
  connection.query(sql, params, (err, rows, fields) => {
    res.send(rows);
    // console.log(err);
    // console.log(rows);
  });
});

// 其他接口代码保持不变...

关键说明 #

• upload.none()表示只解析表单中的文本字段，不处理文件上传；如果你的form-data需要上传文件，可以改用upload.single('fileFieldName')（单文件）或upload.array('fileFieldName', 5)（多文件）。
• 配置完成后，form-data中的字段会被正常解析到req.body中，和你预期的一致。

验证方式 #

按照你的复现步骤重新发送form-data请求，此时req.body应该能正确获取到表单数据，接口也会返回200状态码。

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