React+Express使用Multer上传PDF报MulterError: Unexpected field错误求助

问题原因 #

你连续使用两个single()中间件（imgUpload.single("image")和pdfUpload.single("pdf")）的用法有误。single()方法仅会解析请求中指定的单个文件字段，并且会将请求中未被当前single()处理的其他文件字段判定为“意外字段”，从而抛出Unexpected field错误。

解决方案 #

使用Multer的fields()方法替代多个single()，该方法支持同时处理多个不同的文件字段，还能为每个字段单独配置存储、过滤规则。

代码修改步骤 #

1. 调整Multer配置

根据图片和PDF的不同上传需求，整合规则到一个fields配置中：

const multer = require("multer");
const { v4: uuidv4 } = require("uuid");

// 图片上传配置
const MIME_TYPE_MAP_IMG = {
  "image/png": "png",
  "image/jpeg": "jpg",
  "image/jpg": "jpg"
};

const imgStorage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, `.../storage/images/${uuidv4()}`); // 按需调整图片存储目录
  },
  filename: (req, file, cb) => {
    const ext = MIME_TYPE_MAP_IMG[file.mimetype];
    cb(null, uuidv4() + "." + ext);
  }
});

const imgFilter = (req, file, cb) => {
  const isValid = !!MIME_TYPE_MAP_IMG[file.mimetype];
  let error = isValid ? null : new Error("无效的图片类型！");
  cb(error, isValid);
};

// PDF上传配置
const MIME_TYPE_MAP_PDF = {
  "application/pdf": "pdf"
};

const pdfStorage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, `.../storage/${uuidv4()}`); // 按需调整PDF存储目录
  },
  filename: (req, file, cb) => {
    const ext = MIME_TYPE_MAP_PDF[file.mimetype];
    cb(null, uuidv4() + "." + ext);
  }
});

const pdfFilter = (req, file, cb) => {
  const isValid = !!MIME_TYPE_MAP_PDF[file.mimetype];
  let error = isValid ? null : new Error("无效的PDF类型！");
  cb(error, isValid);
};

// 创建整合后的上传中间件
const upload = multer({
  limits: 500000 // 统一限制文件大小，单位字节
}).fields([
  {
    name: "image",
    maxCount: 1,
    storage: imgStorage,
    fileFilter: imgFilter
  },
  {
    name: "pdf",
    maxCount: 1,
    storage: pdfStorage,
    fileFilter: pdfFilter
  }
]);

2. 修改路由配置

将原来的两个single()中间件替换为整合后的upload中间件：

router.post(
  ".../upload-post",
  upload, // 替换为fields中间件
  [
    // express-validator 校验规则
  ],
  controller.uploadPdf,
  controller.uploadPost
);

3. 前端请求无需修改

你的前端FormData字段名（image和pdf）与后端配置完全匹配，无需调整。

注意事项 #

• 确保存储目录存在，或Multer拥有自动创建目录的权限，可在项目启动时手动创建目录避免报错。
• 检查limits配置的文件大小是否符合业务需求，当前设置为500KB。

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