如何编写Multer中间件同时处理images与嵌套image字段的文件上传？

你的场景里既有顶层数组字段images，又有嵌套在services数组对象里的image字段，Multer默认的array/single方法没法直接处理这种嵌套结构，得自定义中间件来实现，步骤如下：

1. 基础配置Multer存储引擎 #

先定义Multer的存储规则，比如存到本地磁盘：

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

// 配置磁盘存储
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, path.join(__dirname, 'uploads')); // 自定义存储目录，需提前创建
  },
  filename: function (req, file, cb) {
    // 生成唯一文件名避免重名
    const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9);
    cb(null, file.fieldname + '-' + uniqueSuffix + path.extname(file.originalname));
  }
});

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

2. 自定义中间件处理嵌套字段 #

用upload.any()接收所有上传的文件，再手动把文件路径映射到req.body对应的嵌套结构中：

const handleNestedUploads = (req, res, next) => {
  if (!req.files || req.files.length === 0) return next();

  // 解析基础数据（前端需把结构数据转成JSON字符串传入）
  req.body = typeof req.body.data === 'string' ? JSON.parse(req.body.data) : req.body;

  // 处理顶层images数组：匹配字段名格式为`images[*]`的文件
  const topLevelImages = req.files.filter(file => file.fieldname.startsWith('images['));
  if (topLevelImages.length) {
    req.body.images = topLevelImages.map(file => `/uploads/${file.filename}`);
  }

  // 处理services嵌套的image字段：匹配字段名格式为`services[*][image]`的文件
  const serviceImages = req.files.filter(file => file.fieldname.startsWith('services['));
  serviceImages.forEach(file => {
    const indexMatch = file.fieldname.match(/services\[(\d+)\]\[image\]/);
    if (indexMatch && indexMatch[1]) {
      const idx = parseInt(indexMatch[1]);
      if (req.body.services?.[idx]) {
        req.body.services[idx].image = `/uploads/${file.filename}`;
      }
    }
  });

  next();
};

3. 路由中组合使用中间件 #

把upload.any()和自定义映射中间件搭配使用：

const express = require('express');
const router = express.Router();

// 确保先配置表单解析中间件
router.use(express.urlencoded({ extended: true }));

router.post('/upload', upload.any(), handleNestedUploads, (req, res) => {
  // 此时req.body已包含处理后的文件路径，可直接存入数据库
  console.log(req.body);
  res.status(200).json({ message: '上传成功', data: req.body });
});

4. 前端FormData传参示例 #

前端需按照嵌套结构的命名规则设置FormData键名：

const formData = new FormData();

// 传入基础结构数据
const baseData = {
  _id: 62872,
  images: [''],
  services: [
    { _id: 67897, image: '' }
  ]
};
formData.append('data', JSON.stringify(baseData));

// 添加顶层images文件（示例：上传2个文件）
const topImages = document.getElementById('top-images-input').files;
for (let i = 0; i < topImages.length; i++) {
  formData.append(`images[${i}]`, topImages[i]);
}

// 添加services里的image文件（示例：第一个service的图片）
const serviceImage = document.getElementById('service-image-0').files[0];
formData.append('services[0][image]', serviceImage);

// 发送上传请求
fetch('/upload', {
  method: 'POST',
  body: formData
});

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