如何使用Express、MongoDB与Mongoose实现多图上传功能？

核心改造逻辑 #

所有修改完全兼容你参照的GeeksforGeeks单图上传教程的现有配置，不需要推翻原有代码结构，仅需调整3处关键节点：

• Multer上传中间件的接收方法
• Mongoose数据模型的字段结构
• 路由接口的文件数据读取逻辑

分步改造操作 #

1. 调整Multer上传中间件配置 #

原教程单图场景默认使用upload.single('字段名')接收单张上传文件，多图场景下无需改动原有的存储引擎配置（不管是本地磁盘存储还是以Buffer直存MongoDB的配置都通用），仅需替换文件接收方法：

• 同个表单字段选择多张图片上传的场景：使用upload.array('images', 最大允许上传数量)替换原来的single方法，例如限制最多传6张图就写upload.array('images', 6)
• 表单存在多个独立图片上传字段的场景：使用upload.fields([{name: '主图', maxCount: 1}, {name: '细节图', maxCount: 4}])配置每个字段的最大上传数

2. 调整Mongoose数据模型结构 #

原教程单图场景下，图片字段为单个对象结构，多图场景下需要将该字段修改为数组类型，才能存储多组图片数据：

// 原单图模型定义
const productSchema = new mongoose.Schema({
  productName: String,
  coverImage: {
    data: Buffer,
    contentType: String
  }
})

// 改造后的多图模型定义
const productSchema = new mongoose.Schema({
  productName: String,
  // 字段定义为数组结构，支持存储多组图片数据
  productImages: [
    {
      data: Buffer,
      contentType: String
    }
  ]
})

3. 调整路由接口的处理逻辑 #

原单图场景下，Multer处理完文件后会将单文件信息挂载在req.file属性上，多图场景下文件信息会挂载在req.files属性上，对应调整数据组装逻辑即可：

// 原单图上传路由
app.post('/upload', upload.single('coverImage'), async (req, res) => {
  const product = new Product({
    productName: req.body.productName,
    coverImage: {
      data: req.file.buffer,
      contentType: req.file.mimetype
    }
  })
  await product.save()
  res.send('上传成功')
})

// 改造后的多图上传路由（同字段多图场景）
app.post('/upload', upload.array('productImages', 6), async (req, res) => {
  // 遍历接收到的文件数组，转成模型要求的结构
  const imageList = req.files.map(file => ({
    data: file.buffer,
    contentType: file.mimetype
  }))
  const product = new Product({
    productName: req.body.productName,
    productImages: imageList
  })
  await product.save()
  res.send('多图上传成功')
})

4. 图片返回逻辑适配 #

• 列表/详情接口直接将存储的图片数组和其他业务字段一起序列化返回给前端即可
• 单图预览接口可以通过业务数据的ID+图片数组索引，取出对应图片的Buffer，设置正确的Content-Type响应头后返回给前端展示

前端注意事项：使用FormData提交多图时，需要循环将所有选中的图片文件追加到同一个字段名下，不要重复覆盖同一个key值，否则后端只会接收到最后一张图片。

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