使用Multer多图上传异常：仅最后选中的文件被上传

问题排查与修复步骤 #

1. 修正Multer中间件配置 #

你的upload.array调用中，第二个参数（允许上传的最大文件数）缺失，导致Multer默认仅处理单个文件。补充该参数即可开启多文件支持：

const configuredMulterMiddleware = upload.array('image', 5); // 示例允许最多上传5个文件，可按需调整数值

2. 确保前端表单配置正确 #

前端表单必须添加enctype="multipart/form-data"属性，否则无法正确传递多文件数据：

<form method="POST" action="/你的上传接口路径" enctype="multipart/form-data">
  <div id="item-upload">
    <p>
      <label for="image">Image</label>
      <input type="file" id="img-upload" name="image" value="uploading_img" multiple accept="image/png,image/jpg" <% if (imageRequired) { %>required<% } %>>
    </p>
    <img id="photo-upload__preview" class="upload-preview"></img>
  </div>
  <button type="submit">上传</button>
</form>

3. 后端接收逻辑验证 #

在处理上传的路由中，必须通过req.files获取所有上传文件（单文件用req.file，多文件场景必须用req.files）：

const express = require('express');
const router = express.Router();
const configuredMulterMiddleware = require('./你的multer配置文件路径');

router.post('/upload', configuredMulterMiddleware, (req, res) => {
  console.log('上传的文件列表:', req.files); // 此处应输出所有选中的文件信息
  // 后续业务逻辑处理
  res.status(200).json({ message: '文件上传成功', files: req.files });
});

额外提示 #

• 当前前端预览仅支持单张图片展示，若需预览所有选中文件，需通过JavaScript动态创建多个<img>标签实现。
• 可根据业务需求调整multer.diskStorage中的存储路径和文件名规则，确保文件名唯一避免文件覆盖。

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