前端传递图片时出现req.file.path未定义错误的求助

我在后端使用multer和cloudinary将图片上传至MongoDB时，遇到了req.file.path未定义的错误。通过POSTMAN调用API可以正常完成用户注册并返回图片链接，因此推测是前端传递图片的逻辑存在问题。

后端代码 #

controller.js #

const jwt = require("jsonwebtoken");
const bcrypt = require("bcryptjs");
const asyncHandler = require("express-async-handler");
const User = require("../models/userModel");

const registerUser = asyncHandler(async (req, res) => {
  const { proImg, role, firstName, lastName, email, password } = req.body;

  if (!firstName || !lastName || !email || !password) {
    res.status(400);
    throw new Error("Please add all the required fields");
  }

  //Check if the emails already exist
  const userExists = await User.findOne({ email });
  const sellerExists = await Seller.findOne({ email });
  if (userExists || sellerExists) {
    res.status(400);
    throw new Error("Email already exists");
  }

  //Hash passwords
  const salt = await bcrypt.genSalt(10);
  const hashedPassword = await bcrypt.hash(password, salt);

  //Create user
  const user = await User.create({
    proImg: req.file.path, //Getting error on this line
    role,
    firstName,
    lastName,
    email,
    password: hashedPassword,
  });

  if (user) {
    res.status(201).json({
      _id: user.id,
      proImg: user.proImg,
      role: user.role,
      firstName: user.firstName,
      lastName: user.lastName,
      email: user.email,
      token: generateToken(user._id),
    });
  } else {
    res.status(400);
    throw new Error("Invalid user data");
  }
});

cloudinary.config.js #

const multer = require("multer");
const cloudinary = require("cloudinary").v2;
const { CloudinaryStorage } = require("multer-storage-cloudinary");

const { CLOUDINARY_API, CLOUDINARY_SECRET, CLOUDINARY_HOST } = process.env;
cloudinary.config({
  cloud_name: CLOUDINARY_HOST,
  api_key: CLOUDINARY_API,
  api_secret: CLOUDINARY_SECRET,
});

const storage = new CloudinaryStorage({
  cloudinary: cloudinary,
  params: {
    folder: "images",
    format: async () => "png",
    public_id: (req, file) => file.filename,
  },
});

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

module.exports = parser;

前端代码 #

SignupBuyer.jsx #

const [data, setData] = useState({
    proImg: "",
    role: "buyer",
    firstName: "",
    lastName: "",
    email: "",
    password: "",
    cPassword: "",
  });

  const { proImg, role, firstName, lastName, email, password, cPassword } =
    data;

  const navigate = useNavigate();
  const dispatch = useDispatch();

  const { user, isLoading, isSuccess, isError, message } = useSelector(
    (state) => state.auth
  );

  useEffect(() => {
    if (isError) toast.error(message);

    if (isSuccess || user) {
      navigate("/buyerdashboard");
    }

    dispatch(reset());
  }, [user, isError, isSuccess, message, navigate, dispatch]);

  //Toggle password display
  const [passwordShown, setPasswordShown] = useState(false);
  const togglePassword = () => {
    setPasswordShown(!passwordShown);
  };

  const handleImage = (e) => {
    setData((prevState) => ({
      ...prevState,
      proImg: e.target.files[0],
    }));

    console.log(e.target.files[0]);
  };

  const handleChange = (e) => {
    setData((prevState) => ({
      ...prevState,
      [e.target.name]: e.target.value,
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (password !== cPassword) {
      toast.error("Passwords do not match");
    } else {
      const userData = { proImg, role, firstName, lastName, email, password };

      dispatch(register(userData));
    }
  };

  if (isLoading) return <Spinner />;

  return (
    <>
      <div className="signup">
        <div className="signup__container">
          <h3>Join Us to Hire Talent</h3>
          <form
            className="signup__container-form"
            encType="multipart/form-data"
            onSubmit={handleSubmit}
          >
            <input
              type="file"
              accept=".png, .jpeg, .jpg"
              name="proImg"
              onChange={handleImage}
            />

问题分析 #

Postman能正常请求说明后端multer配置、路由逻辑均无问题，核心错误是前端没有以multipart/form-data格式传递文件：直接将File对象放入普通JSON对象提交时，请求头会被自动设为application/json，导致后端multer无法解析文件，最终req.file为undefined。

解决方案 #

1. 前端构建FormData对象提交 #

修改handleSubmit函数，用FormData承载所有字段（包括文件）：

const handleSubmit = (e) => {
  e.preventDefault();
  if (password !== cPassword) {
    toast.error("Passwords do not match");
  } else {
    const formData = new FormData();
    formData.append('proImg', proImg);
    formData.append('role', role);
    formData.append('firstName', firstName);
    formData.append('lastName', lastName);
    formData.append('email', email);
    formData.append('password', password);

    dispatch(register(formData));
  }
};

2. 调整API请求配置 #

确保请求时不要手动设置Content-Type头，浏览器会自动为FormData添加正确的multipart/form-data及boundary标识，示例action代码：

const register = (formData) => async (dispatch) => {
  try {
    const response = await axios.post('/api/users/register', formData);
    // 后续状态更新逻辑
  } catch (error) {
    // 错误处理逻辑
  }
};

3. 后端增加空值判断（可选） #

在controller中先校验req.file是否存在，避免直接报错：

// Create user
if (!req.file) {
  res.status(400);
  throw new Error("Please upload a profile image");
}
const user = await User.create({
  proImg: req.file.path,
  role,
  firstName,
  lastName,
  email,
  password: hashedPassword,
});

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