使用Post请求时req.body为空，带文件上传的用户注册问题

问题原因 #

你遇到的核心问题是：

• 当用**普通表单（multipart/form-data格式）**提交时，Express默认的express.json()和express.urlencoded()中间件无法解析这种包含文件的请求格式，导致req.body为空。
• 而x-www-form-urlencoded格式本身不支持文件上传，所以能正常获取表单字段，但无法处理文件。

要同时支持表单字段和文件上传，必须使用专门处理multipart/form-data的中间件——multer。

解决方案步骤 #

1. 安装multer #

npm install multer

2. 配置multer并修改路由 #

multer支持磁盘存储或内存存储，这里以磁盘存储为例（方便保存文件到服务器）：

路由文件（user.route.js）

import express from 'express';
import multer from 'multer';

const router = express.Router();

// 配置multer的磁盘存储规则
const storage = multer.diskStorage({
  // 设置文件保存目录（需提前在项目根目录创建uploads文件夹）
  destination: (req, file, cb) => {
    cb(null, 'uploads/');
  },
  // 设置文件名，避免重复
  filename: (req, file, cb) => {
    cb(null, `${Date.now()}-${file.originalname}`);
  }
});

// 创建multer实例
const upload = multer({ storage: storage });

// 注册接口使用upload中间件，`single('profilePic')`表示接收名为profilePic的单个文件
router.route("/register").post(upload.single('profilePic'), registerUser);

// 注册逻辑函数
const registerUser = (req, res) => {
  try {
    // 表单字段从req.body获取
    const { fullName, email, username, password } = req.body;
    // 上传的文件信息从req.file获取
    const uploadedFile = req.file;

    console.log("req.body: ", req.body);
    console.log("上传文件信息: ", uploadedFile);

    // 校验所有必填项（包括文件）
    if (!fullName || !email || !username || !password || !uploadedFile) {
      return res.status(400).send("所有输入项和文件都不能为空");
    }

    // 后续逻辑：将用户信息和文件路径存入数据库等
    // ...

    res.status(201).send("用户注册成功");
  } catch (err) {
    res.status(500).send(err.message);
  }
};

export default router;

App.js（保持原有中间件即可）

import express from 'express';
import userRoute from './routes/user.route.js';

const app = express();

app.use(express.json({limit:"30mb",extended:true}));
app.use(express.urlencoded({extended:true}));

app.use("/users", userRoute);

// 启动服务器
app.listen(3000, () => console.log("服务器运行在3000端口"));

3. Postman测试方法 #

选择POST请求，地址填http://localhost:3000/users/register，然后：

• 切换到form-data格式
• 添加以下字段：
  • fullName（文本类型）：输入姓名
  • email（文本类型）：输入邮箱
  • username（文本类型）：输入用户名
  • password（文本类型）：输入密码
  • profilePic（文件类型）：选择要上传的文件

发送请求后，就能正常获取req.body和上传的文件信息了。

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