React传文件至Express遇MulterError: Unexpected Field问题求助

我尝试从React前端向Express后端发送图片文件及其他文本信息，计划通过multer中间件将图片存储至AWS S3，再把S3返回的图片URL和其他信息存入服务器数据库。但无论使用upload.single、upload.array还是修改Content-Type，始终触发MulterError: Unexpected Field错误，已排查数小时仍无头绪。AWS S3通过.env中IAM用户的access/secret access key访问。

React端代码 #

const Item = () => {
  
  const {
    register,
    handleSubmit,
    formState: { isSubmitting },
  } = useForm({
    defaultValues: {
      itemName: "",
      imgs: null,
      webpImgs: null,
      price: null,
      category: "",
      brand: "",
      sale: null,
    },
  });

  const onSubmit = async (data) => {
    const formData = new FormData();
    var sumFile = document.querySelector("#sumFile");
    formData.append("sumFile", sumFile?.files[0]);
 
    const blob = new Blob([data], {
      type: "application/json",
    });
    formData.append("info", blob);

    try {
      addItem(formData).then(async (res) => {
        if (res.status === 200) {
          alert("test");
        } else {
          alert("fail");
        }
      });
    } catch (err) {
      return err;
    }
  };

  return (
    <form className="user-form" onSubmit={handleSubmit(onSubmit)}>
      <select {...register("category")}>
        <option value="a">a</option>
        <option value="b">b</option>
        <option value="c">c</option>
      </select>
      <select {...register("type")}>
        <option value="Short">Short</option>
        <option value="Long">Long</option>
        <option value="Dress">Dress</option>
      </select>

      <input {...register("itemName")} placeholder="itemName" />
      <input
        {...register("file")}
        type="file"
        name="sumFile"
        id="sumFile"
        accept="image/*"
      />
      <input {...register("price")} placeholder="price" />
      <input {...register("brand")} placeholder="brand" />
      <input {...register("sale")} placeholder="sale" />

      <button disabled={isSubmitting}>Add</button>
    </form>
  );
};

Express端代码 #

const express = require("express");
const router = express.Router();
const item = require("../controllers/item");
const { S3Client} = require("@aws-sdk/client-s3");
const dotenv = require("dotenv");
const multer = require("multer");
const multerS3 = require("multer-s3");
const s3 = new S3Client();
dotenv.config();

const upload = multer({
  storage: multerS3({
    s3: s3,
    bucket: "bucket name",
    metadata: function (req, file, cb) {
      cb(null, { fieldName: file.fieldname });
    },
    key: function (req, file, cb) {
      cb(null, Date.now().toString());
    },
  }),
});

router.post("/additem", upload.array("sumFile", 2), function (req, res, next) {
  console.log(req.files);
  res.status(200).send("Successfully uploaded ");
});

module.exports = router;

请求负载 #

------WebKitFormBoundaryJxBVt4RCvqhg3w9L Content-Disposition: form-data; name="sumFile"; filename="a.png" Content-Type: image/png

------WebKitFormBoundaryJxBVt4RCvqhg3w9L Content-Disposition: form-data; name="info"; filename="blob" Content-Type: application/json

错误详情 #

Unexpected field MulterError: Unexpected field
at wrappedFileFilter (/Users/home/self/backtest/server/node_modules/multer/index.js:40:19)
at Multipart. (/Users/home/self/backtest/server/node_modules/multer/lib/make-middleware.js:107:7)
at Multipart.emit (node:events:513:28)
at HeaderParser.cb (/Users/home/self/backtest/server/node_modules/busboy/lib/types/multipart.js:358:14)
at HeaderParser.push (/Users/home/self/backtest/server/node_modules/busboy/lib/types/multipart.js:162:20)
at SBMH.ssCb [as _cb] (/Users/home/self/backtest/server/node_modules/busboy/lib/types/multipart.js:394:37)
at feed (/Users/home/self/backtest/server/node_modules/streamsearch/lib/sbmh.js:219:14)
at SBMH.push (/Users/home/self/backtest/server/node_modules/streamsearch/lib/sbmh.js:104:16)
at Multipart._write (/Users/home/self/backtest/server/node_modules/busboy/lib/types/multipart.js:567:19)
at writeOrBuffer (node:internal/streams/writable:392:12)

解决方案 #

这个错误的核心原因是Multer默认只处理配置中指定的字段，你额外发送的info字段被Multer判定为“意外字段”。

修复步骤： #

1. 调整Multer配置，明确指定文件字段
   使用upload.fields替代upload.array，明确声明要处理的文件字段，Multer会自动忽略非文件字段，同时保留在req.body中：

   router.post("/additem", upload.fields([{ name: "sumFile", maxCount: 2 }]), function (req, res, next) {
     console.log(req.files); // sumFile的文件信息
     // 解析前端传来的info Blob
     const info = JSON.parse(req.body.info);
     console.log(info); // 其他文本信息
     res.status(200).send("Successfully uploaded ");
   });
   

2. 优化React端FormData构造逻辑
   无需将整个data转成Blob，直接逐个添加文本字段更清晰，避免解析问题：

   const onSubmit = async (data) => {
     const formData = new FormData();
     // 添加文件
     const sumFile = document.querySelector("#sumFile");
     if (sumFile?.files[0]) {
       formData.append("sumFile", sumFile.files[0]);
     }
     // 遍历添加所有文本字段
     Object.keys(data).forEach(key => {
       if (data[key] !== null && data[key] !== "") {
         formData.append(key, data[key]);
       }
     });
   
     try {
       const res = await addItem(formData);
       res.status === 200 ? alert("test") : alert("fail");
     } catch (err) {
       console.error(err);
     }
   };
   

   这样后端直接从req.body拿文本字段，req.files拿文件信息，无需额外解析Blob。

3. 补充S3客户端配置检查
   虽然当前错误和S3无关，但要确保.env中的密钥被正确读取：

   const s3 = new S3Client({
     credentials: {
       accessKeyId: process.env.AWS_ACCESS_KEY_ID,
       secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY,
     },
     region: process.env.AWS_REGION, // 必须指定存储桶区域
   });
   

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