使用Multer实现不同类型文件上传至对应文件夹的问题

这个问题我之前踩过坑，你用两次single()中间件的思路不对——single()一次只能处理一个指定字段的文件，第二个中间件运行时会发现请求里还有它不期望的字段（比如第一个处理了music，第二个single('img')会觉得music是多余的），所以才会抛出"Unexpected field"错误。

咱们换用Multer的fields()方法就能完美解决，它支持同时处理多个不同字段的文件，还能通过自定义存储引擎给每个字段指定不同的存储文件夹。下面是完整的实现方案：

1. 服务器端代码（Express + Multer） #

首先配置自定义的磁盘存储，根据文件对应的字段名来决定存储路径，然后用fields()指定要处理的两个字段：

const express = require('express');
const multer = require('multer');
const fs = require('fs');
const app = express();

// 先确保目标文件夹存在，Multer不会自动创建
['img', 'music'].forEach(folder => {
  if (!fs.existsSync(folder)) {
    fs.mkdirSync(folder);
  }
});

// 自定义存储配置：根据字段名分配存储文件夹
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    // 判断当前文件对应的表单字段名，选择存储文件夹
    const targetFolder = file.fieldname === 'img' ? 'img' : 'music';
    cb(null, targetFolder);
  },
  filename: (req, file, cb) => {
    // 自定义文件名：时间戳+原文件名，避免重名覆盖
    cb(null, `${Date.now()}-${file.originalname}`);
  }
});

// 创建Multer实例，使用fields指定要处理的多个字段
const upload = multer({ storage });

// 处理上传请求的路由
app.post('/music', upload.fields([
  { name: 'img', maxCount: 1 }, // 处理name为img的字段，最多1个文件
  { name: 'music', maxCount: 1 } // 处理name为music的字段，最多1个文件
]), (req, res) => {
  // 上传的文件会被存在req.files对象里
  console.log('上传的图片:', req.files.img[0]);
  console.log('上传的MP3:', req.files.music[0]);
  res.status(200).send('两个文件上传完成！');
});

app.listen(3000, () => {
  console.log('服务器运行在 http://localhost:3000');
});

2. 修正后的表单代码 #

你的原表单有个小错误：form标签里写了两个action属性，而且第一个应该是method="post"，另外可以加上accept属性限制文件类型，提升用户体验：

<form method="post" enctype="multipart/form-data" action="/music">
  <input type="file" id="img" name="img" accept="image/*">
  <input type="file" id="music" name="music" accept="audio/mpeg">
  <input type="submit" value="Send">
</form>

关键说明 #

• fields()方法专门用于处理多个不同字段的文件上传，每个字段可以单独配置允许的文件数量（maxCount）。
• 自定义diskStorage时，通过file.fieldname可以拿到当前文件对应的表单字段名，从而动态分配存储文件夹。
• 一定要确保img和music文件夹存在，否则Multer会报错，上面的代码里我加了自动创建文件夹的逻辑。

内容的提问来源于stack exchange，提问作者Christian Vincenzo Traina