React结合Multer上传文件时大小限制失效问题求助

问题根源分析 #

1. multer限制项误用：你配置的limits.fieldSize是用来限制表单中非文件字段（如文本输入）的大小，而非上传文件的大小，正确的文件大小限制参数应为fileSize。
2. 前后端字段名不匹配：前端FormData中字段名是"File"（大写F），但后端multer指定的是"file"（小写f），导致multer无法识别上传的文件，请求被express默认的body解析中间件拦截，触发其默认的100KB（102400字节）大小限制。
3. 前端请求格式错误：你创建了FormData但未传给请求方法，反而直接传入selectedFile，导致请求不是multipart/form-data格式，进一步触发大小限制报错。

修正步骤 #

1. 修正后端multer配置

将limits.fieldSize替换为limits.fileSize，确保限制的是上传文件的大小：

const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    console.log('QQQQQQQQQQQQQQQQQQQQ');
    cb(null, "uploads/")
  },
  filename: (req, file, cb) => {
    cb(null, Date.now() + "-" + file.originalname)
  },
})

let maxSize = 1024 * 1024 * 10; // 10MB

const uploadStorage = multer({ 
  storage: storage, 
  limits: { fileSize: maxSize } // 修正为fileSize
})

app.post("/upload/single", uploadStorage.single("file"), (req, res) => {
  console.log('AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA');
  console.log(req.file)
  return res.status(200).send("文件上传成功")
})

2. 修正前端请求代码

• 确保FormData的字段名和后端一致（小写"file"）
• 将FormData作为请求体传入，而非直接传入文件对象：

const onFileUpload = () => {
  console.log("BBBBBBBBBBBBBBBBBB");
  const formData = new FormData();

  formData.append("file", selectedFile); // 字段名和后端统一为小写file

  fetch("http://localhost:4000/upload/single", {
    method: "POST",
    body: formData,
    // 无需手动设置Content-Type，浏览器会自动添加正确的boundary
  })
  .then((res) => res.text())
  .then((data) => {
    console.log("res", data);
  })
  .catch((err) => {
    console.error("Unable to post PDF", err);
  });
};

如果使用axios封装的client，需确保传入FormData并正确设置请求头：

client.post("http://localhost:4000/upload/single", formData, {
  headers: {
    "Content-Type": "multipart/form-data"
  }
})

替代方案（multer失效时可选） #

可以使用express-fileupload替代，配置更简洁：

1. 安装依赖：npm install express-fileupload
2. 后端代码：

const fileUpload = require('express-fileupload');
app.use(fileUpload({
  limits: { fileSize: 10 * 1024 * 1024 }, // 10MB限制
  createParentPath: true
}));

app.post("/upload/single", (req, res) => {
  if (!req.files || !req.files.file) {
    return res.status(400).send("没有上传文件");
  }
  const file = req.files.file;
  file.mv(`uploads/${Date.now()}-${file.name}`, (err) => {
    if (err) return res.status(500).send(err);
    res.send("文件上传成功");
  });
});

前端代码与修正后的版本一致即可。

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