Node.js中Express中间件无法获取form-data的req.body问题

问题原因 #

你遇到的核心问题是：express.json() 和 bodyParser.urlencoded 无法解析 multipart/form-data 格式的请求，而且你的代码逻辑顺序错误——在调用multer解析请求之前就尝试读取req.body，此时请求还未被处理，自然拿到的是空对象。

解决方案 #

必须让multer先处理请求，解析form-data中的文本字段和文件，之后才能从req.body中获取数据。以下是具体修改步骤：

1. 调整路由逻辑，让multer先执行 #

修改routes/albums.js，将multer作为前置中间件，确保请求被解析后再读取req.body：

// routes/albums.js
const express = require('express');
const router = express.Router();
const albumUpload = require('../Middlewares/Multer');
const { uploadAlbum } = require('../Controller/Albumcontroller');

// 先通过multer解析form-data，再处理业务逻辑
router.post('/upload', albumUpload, (req, res, next) => {
  const { title } = req.body;
  console.log("req.body:", req.body); // 现在能正常拿到title
  // 若需要把title传给后续控制器，可挂载到req对象上
  req.albumTitle = title;
  next();
}, uploadAlbum);

module.exports = router;

2. 修正Multer中间件配置 #

确保你的multer配置能正确解析文本字段（默认支持，只需正确配置存储即可）：

// Middlewares/Multer.js
const multer = require('multer');
const path = require('path');
const fs = require('fs');

// 确保上传目录存在，避免报错
const uploadDir = 'uploads/albums/';
if (!fs.existsSync(uploadDir)) {
  fs.mkdirSync(uploadDir, { recursive: true });
}

const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, uploadDir);
  },
  filename: (req, file, cb) => {
    // 可结合albumTitle自定义文件名
    const fileName = `${Date.now()}-${path.extname(file.originalname)}`;
    cb(null, fileName);
  }
});

// 导出multer实例，默认会解析form-data中的所有文本字段和文件
const albumUpload = multer({
  storage: storage,
  limits: { fileSize: 5 * 1024 * 1024 } // 限制单文件5MB
});

module.exports = albumUpload;

3. 在控制器中获取数据 #

此时uploadAlbum控制器可以直接从req.body或挂载的req.albumTitle获取标题：

// Controller/Albumcontroller.js
exports.uploadAlbum = (req, res) => {
  const title = req.body.title;
  const uploadedFiles = req.files; // 获取上传的文件数组

  // 后续执行存入数据库等业务逻辑
  res.status(200).json({
    message: '相册上传成功',
    albumTitle: title,
    uploadedFiles: uploadedFiles.map(file => file.filename)
  });
};

4. 清理冗余配置 #

你的index.js中同时使用了express.json()和bodyParser.json()，两者功能重复，保留一个即可：

// index.js
const express = require("express");
const mongoose = require("mongoose");
const path = require("path");
const cors = require('cors')
require("dotenv").config();

const app = express();
app.use(cors())
// 保留一个json解析即可，form-data由multer处理
app.use(express.json());
// 若需处理x-www-form-urlencoded请求，保留下面一行；否则可删除
app.use(express.urlencoded({ extended: true }));

// ...其他配置（路由、数据库连接等）

额外注意事项 #

• Postman请求需确保：POST方法、Content-Type自动设为form-data（无需手动指定）、title字段类型选Text、文件字段类型选File。
• 若需指定multer只解析特定字段，可使用albumUpload.fields([{name: 'title'}, {name: 'photos', maxCount: 10}])这样的配置。

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