Express Multer上传图片时req.file返回undefined的问题求助

问题核心 #

你的后端Multer配置、表单的encType以及input名称都没问题，根本原因是前端发送请求时没有携带文件数据，导致后端无法解析到文件，所以req.file返回undefined。

修复方案 #

步骤1：保存选中的文件并构建FormData #

在React组件中先保存用户选中的文件，然后用FormData对象封装文件数据，键名要和后端upload.single("avatar")的参数完全一致。

步骤2：让Axios自动处理请求头 #

不要手动设置multipart/form-data请求头，Axios会识别FormData并自动生成包含正确boundary的请求头，手动设置会丢失这个关键参数，导致后端解析失败。

修正后的完整代码 #

React组件逻辑 #

import { useState } from 'react';
import axios from 'axios';

// 组件内声明状态保存选中的文件
const [selectedFile, setSelectedFile] = useState(null);

// 处理文件选择事件
const changeHandle = (e) => {
  setSelectedFile(e.target.files[0]);
};

// 修正后的提交函数
const handlePostAvatar = async (e) => {
  e.preventDefault();
  if (!selectedFile) return; // 未选择文件时直接返回

  try {
    const formData = new FormData();
    formData.append("avatar", selectedFile); // 键名必须与后端一致

    const res = await axios.post("/api/auth/changeAvatar", formData);
    console.log(res);
  } catch (err) {
    console.log(err);
  }
};

React表单（无需修改） #

<form onSubmit={handlePostAvatar} encType="multipart/form-data">
  <input
    type="file"
    name="avatar"
    id="avatar"
    onChange={changeHandle}
  />
  <button style={{ cursor: "pointer" }}>Save</button>
</form>

后端auth.js（无需修改，配置正确） #

const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, DIR);
  },
  filename: (req, file, cb) => {
    const fileName = file.originalname.toLowerCase().split(" ").join("-");
    cb(null, Date.now() + "-" + fileName);
  },
});

const upload = multer({
  storage: storage,
  fileFilter: (req, file, cb) => {
    if (
      file.mimetype == "image/png" ||
      file.mimetype == "image/jpg" ||
      file.mimetype == "image/jpeg"
    ) {
      cb(null, true);
    } else {
      cb(null, false);
      return cb(new Error("Only .png, .jpg and .jpeg format allowed!"));
    }
  },
});
router.post(
  "/changeAvatar",
  upload.single("avatar"),
  userAuth,
  async (req, res, next) => {
    try {
      console.log(req.file);
      const url =
        req.protocol + "://" + req.get("host") + "/public/" + req.file.filename;
      const user = await User.findByIdAndUpdate(req.user.id, { image: url });
      res.json({ user });
    } catch (err) {
      res.json({ err });
    }
  }
);

额外注意事项 #

• 确保后端的DIR变量指向的存储目录存在且具备写入权限，否则会导致文件保存失败。
• 如果后续需要携带其他表单字段，直接用formData.append("字段名", 值)添加即可。

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