Multer批量上传图片时req.files为空、数据存在req.body问题求助

问题现象 #

• 预期使用Multer的upload.array("portfolio")接收批量上传的图片数组，通过req.files获取文件列表
• 实际请求到达服务端后req.files为空数组，文件数据异常出现在req.body中
• 客户端侧已确认待上传的图片数组存在，相关截图如下：
  
  

原有问题代码 #

客户端代码

const formData = new FormData();
formData.append("portfolio", portfolio);
formData.append("vendorEmail", vendorEmail); 

服务端代码

//MULTER INIT
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, "/tmp");
  },
  filename: function (req, file, cb) {
    const uniqueSuffix = Date.now() + "-" + Math.round(Math.random() * 1e9);
    cb(null, file.fieldname + "-" + uniqueSuffix);
  },
});

const upload = multer({
  storage: storage,
});

router.post(
  "/portfolio-upload-bulk",
  upload.array("portfolio"),
  (req, res, next) => {
    const imgObj = JSON.parse(JSON.stringify(req.files));
    console.log(req.files);
  }
);

问题根因 #

核心问题是客户端构造FormData的方式错误：直接将整个图片数组作为单个值append到portfolio字段，Multer仅能识别字段值为File/Blob类型的文件项，普通数组/对象类型的值会被判定为普通表单字段，最终被解析到req.body中，无法进入req.files。
另外一个高频触发原因是：发送请求时手动设置了Content-Type: multipart/form-data请求头，丢失了浏览器自动生成的boundary分隔符，导致Multer无法正确解析multipart请求体。

修复方案 #

• 修正客户端FormData构造逻辑：遍历图片数组，将每个文件对象单独append到同名字段portfolio下，upload.array()会自动收集同名字段下的所有文件到req.files数组。注意追加的每一项必须是原生File/Blob类型，不能是base64字符串、自定义普通对象。
  修正后的客户端代码：

  const formData = new FormData();
  // 逐张追加文件到同名字段
  portfolio.forEach(fileItem => {
    formData.append("portfolio", fileItem);
  });
  formData.append("vendorEmail", vendorEmail);
  
  // 发送请求时不要手动设置Content-Type请求头，让浏览器自动生成带boundary的合法请求头
  fetch("/portfolio-upload-bulk", {
    method: "POST",
    body: formData
  })
  

• 检查服务端中间件顺序：确保/portfolio-upload-bulk路由没有被express.json()、express.urlencoded()等会提前消费请求流的body解析中间件拦截，这类中间件无法解析multipart类型请求，还会导致后续Multer无法读取原始请求流拿不到文件。

修复后重新发起请求，即可在req.files中拿到正确的上传文件数组，每个文件项包含originalname、filename、path、size等完整属性。

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