在Express.js中实现用户头像上传：解决Multer报错与文件名重命名

错误原因分析 #

你遇到的错误由两个核心问题导致：

1. 中间件冲突：路由中同时使用了upload.none()和upload.single()。upload.none()是用于处理纯文本表单的中间件，会直接拒绝所有文件字段，因此当表单包含文件时，会触发"Unexpected field"错误。
2. 字段名不匹配：表单中文件输入的name属性是file，但路由中upload.single()监听的字段是avatar，二者不一致也会被判定为意外字段。

解决方案步骤 #

1. 修复路由配置 #

移除冲突的upload.none()中间件，并保证multer监听的字段名与表单一致：

router.post(
  "/edit/image/parse",
  upload.single("file"), // 与表单中<input name="file">对应，若修改表单name为avatar则此处改为"avatar"
  function (req, res, next) {
    // 可通过req.file获取上传文件的详细信息
    console.log("上传文件信息:", req.file);
    res.end("done!");
  }
);

2. 配置Multer自定义文件名 #

通过diskStorage自定义存储规则，将文件名替换为用户用户名（需确保用户已登录，用户名可从req.user或会话中获取）：

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

// 确保存储目录存在，Multer不会自动创建目录
const uploadDir = 'img/users';
if (!fs.existsSync(uploadDir)) {
  fs.mkdirSync(uploadDir, { recursive: true });
}

// 自定义存储配置
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, uploadDir);
  },
  filename: function (req, file, cb) {
    // 假设用户名从已登录用户的会话中获取，替换为你的实际获取逻辑
    const username = req.user.username;
    // 保留原文件扩展名，避免文件类型丢失
    const fileExt = path.extname(file.originalname);
    // 生成新文件名：用户名+扩展名
    cb(null, `${username}${fileExt}`);
  }
});

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

3. 表单字段一致性（可选） #

如果希望保持路由中upload.single("avatar")，需同步修改表单的文件输入name属性：

<form action="/edit/image/parse/" method="post" enctype="multipart/form-data">
  <input type="file" name="avatar">
  <button class="login" type="submit">Submit</button>
</form>

关键注意事项 #

• 必须确保存储目录存在，否则Multer会抛出文件写入错误。
• 用户登录状态需提前验证，确保req.user.username能正确获取到当前用户的用户名（可通过Session、JWT等方式实现）。

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