使用Multer批量上传图片仅第一张被处理，如何修复？

问题描述 #

在Node.js应用中基于Multer开发图片上传功能，通过Postman批量上传多张图片时，仅第一张图片能在req.files中正常处理，后续图片对应的字段在req.body中显示为空字符串；但逐个上传单张图片时一切正常。

上传代码 #

const path = require("path");
const multer = require("multer");

// 配置存储（本地磁盘存储）
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, "uploads/");
  },
  filename: (req, file, cb) => {
    const uniqueSuffix = Date.now() + "-" + Math.round(Math.random() * 1e9);
    cb(
      null,
      `${file.fieldname}-${uniqueSuffix}${path.extname(file.originalname)}`
    );
  },
});

// 初始化Multer上传配置
const upload = multer({
  storage: storage,
  limits: { fileSize: 5 * 1024 * 1024 }, // 限制文件大小为5MB
  fileFilter: (req, file, cb) => {
    const fileTypes = /jpeg|jpg|png/;
    const extname = fileTypes.test(
      path.extname(file.originalname).toLowerCase()
    );
    const mimetype = fileTypes.test(file.mimetype);

    if (mimetype && extname) {
      return cb(null, true);
    }
    cb(new Error("仅允许上传JPEG/JPG/PNG格式的图片！"));
  },
}).fields([
  { name: "businessCertificate", maxCount: 1 },
  { name: "hkidCard", maxCount: 1 },
  { name: "mainImage", maxCount: 1 },
]);

module.exports = upload;

API路由代码 #

router.put(
  "/:id",
  authMiddleware.authenticate.bind(authMiddleware),
  upload,
  (req, res) => {
    if (req.files) {
      console.log("接收的文件:", req.files);
    }

    console.log("请求体内容:", req.body);
  }
);

Postman请求截图 #

控制台输出 #

Files received: [Object: null prototype] {
  businessCertificate: [
    {
      fieldname: 'businessCertificate',
      originalname: 'Screenshot 2024-09-05 002708.png',
      encoding: '7bit',
      mimetype: 'image/png',
      destination: 'uploads/',
      filename: 'businessCertificate-1729668535864-740051976.png',
      path: 'uploads\\businessCertificate-1729668535864-740051976.png',
      size: 35854
    }
  ]
}
Request body: [Object: null prototype] { mainImage: '', hkidCard: '' }

问题排查与解决方案 #

1. 修正Postman字段类型配置 #

从截图判断，你大概率是将hkidCard、mainImage这类需要上传文件的字段错误设置为了Text类型，而非File类型。正确操作：

• 在Postman的Body表单中，每个文件字段都要选择File类型；
• 确保每个File字段都已选中本地图片文件，没有留空。

2. 添加Multer错误捕获逻辑 #

当前代码没有处理Multer的上传错误，可能存在文件验证失败但未被捕获的情况。修改路由代码，增加错误处理：

router.put(
  "/:id",
  authMiddleware.authenticate.bind(authMiddleware),
  (req, res, next) => {
    upload(req, res, (err) => {
      if (err instanceof multer.MulterError) {
        // 处理Multer内置错误（如文件大小超限）
        return res.status(400).json({ error: err.message });
      } else if (err) {
        // 处理自定义文件格式验证错误
        return res.status(400).json({ error: err.message });
      }
      next();
    });
  },
  (req, res) => {
    console.log("接收的文件:", req.files);
    console.log("请求体内容:", req.body);
    res.status(200).json({ message: "上传处理完成", files: req.files });
  }
);

3. 确认请求编码类型 #

确保Postman请求的Content-Type为multipart/form-data，这是文件上传的标准编码格式。选择form-data类型时Postman会自动设置该头，若手动修改过需恢复默认。

4. 检查上传目录权限 #

确认项目根目录下的uploads/文件夹存在，且Node.js进程拥有读写权限：

# 创建uploads目录（若不存在）
mkdir -p uploads
# 赋予读写权限
chmod 755 uploads

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