MERN栈开发中使用Multer上传图片遇类型转换错误求助

错误信息 #

Error: User validation failed: picturePath: Cast to string failed for value "{}" (type Object) at path "picturePath"

问题根源 #

1. 前端传参错误：用FileReader把文件转成base64的DataURL，还手动设置Content-Type: application/json，但FormData上传文件需要用multipart/form-data，且应直接传文件对象而非base64字符串。
2. 后端未配置Multer：未启用文件上传中间件，导致后端接收不到上传文件，req.body.picturePath变成空对象，存入MongoDB时触发string类型验证失败。

前端代码修改（register.jsx） #

1. 简化文件选择逻辑

直接保存文件对象，无需转base64：

const handlePicturePathChange = (event) => {
  const file = event.target.files[0];
  setPicturePath(file); // 存储原始文件对象
  setFileName(file.name);
};

2. 修正FormData提交配置

移除手动设置的Content-Type，axios会自动处理FormData的请求头：

const handleSubmit = async () => {
  const formData = new FormData();

  formData.append("name", name);
  formData.append("email", email);
  formData.append("password", password);
  if (picturePath) {
    formData.append("picture", picturePath); // 键名改为"picture"，与后端对应
  }
  
  try {
    // 无需自定义headers，axios自动处理multipart/form-data
    const result = await axios.post(
      `${BASE_URL}api/auth/register`,
      formData
    );

    console.log(result);
    navigate("/login"); // 注册成功跳转登录页
  } catch (error) {
    console.log(error);
  }
};

后端代码修改 #

1. 安装并配置Multer

先安装依赖：

npm install multer

在路由文件（如auth.js）中配置Multer存储：

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

// 确保存储目录存在，不存在则创建
const uploadDir = path.join(__dirname, '../public/assets');
if (!fs.existsSync(uploadDir)) {
  fs.mkdirSync(uploadDir, { recursive: true });
}

// 配置文件存储规则
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, uploadDir);
  },
  filename: (req, file, cb) => {
    // 用时间戳+原文件名避免重复
    cb(null, `${Date.now()}-${file.originalname}`);
  }
});

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

2. 修改注册路由，启用文件上传中间件

// 注册路由添加upload.single('picture')中间件，对应前端FormData的键名
router.post('/register', upload.single('picture'), registerUser);

3. 更新注册逻辑（user.js）

从req.file中获取文件路径，存入数据库：

const registerUser = async (req, res) => {
  try {
    const { name, email, password } = req.body;
    // 提取上传后的文件相对路径，为空则用默认值
    const picturePath = req.file ? `/assets/${req.file.filename}` : '';

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

    const existingUser = await User.findOne({ email });
    if (existingUser) {
      return res.status(401).send("用户已存在，请使用其他邮箱");
    }

    const newUser = await User.create({
      name,
      email,
      password: hashedPassword,
      picturePath,
    });

    res.status(200).send({
      name: newUser.name,
      email: newUser.email,
      token: generateToken(newUser._id),
    });
  } catch (error) {
    console.log(error);
    res.status(500).send("注册失败，请重试");
  }
};

验证修改 #

完成上述改动后，前端选择图片提交，后端会自动把图片保存到public/assets目录，同时将相对路径存入MongoDB的picturePath字段（string类型），符合Schema验证规则，不会再出现类型转换错误。

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