MERN栈文件上传报错‘name is required’的问题求助

问题核心 #

当使用FormData发送文件上传请求时，Express默认无法解析multipart/form-data格式的请求体，导致req.body为空对象。即使请求Payload中包含name字段，后端验证器也会因读取不到req.body.name而抛出name is required错误。

解决步骤 #

1. 安装并配置文件解析中间件 #

Express需要借助multer中间件来处理multipart/form-data类型的请求，步骤如下：

• 安装依赖：

  npm install multer
  

• 修改Express路由文件（files.js），添加multer配置：

  const router = require("express").Router();
  const multer = require('multer');
  const { File, validate } = require("../models/file");
  
  // 配置multer，这里使用内存存储（可根据需求改为磁盘存储）
  const storage = multer.memoryStorage();
  const upload = multer({ storage: storage });
  
  // 在路由中使用upload中间件，参数'file'对应FormData中文件的key
  router.post("/", upload.single('file'), async (req, res) => {
      try{
          // 构建验证所需的参数，req.body可获取FormData中的非文件字段
          const requestData = {
              name: req.body.name,
              // 若File模型需要文件元数据，可从req.file中获取，比如：
              // originalName: req.file.originalname,
              // fileBuffer: req.file.buffer,
              // mimeType: req.file.mimetype
          };
  
          const { error } = validate(requestData);
          if (error)
              return res.status(400).send({ message: error.details[0].message });
  
          await new File(requestData).save();
          res.status(201).send({message: "File created successfully"})
      }
      catch (error){
          res.status(500).send({message: "Internal Server Error"})
      }
  })
  
  module.exports = router;
  

2. 校验File模型的验证规则 #

确保validate函数的规则与你传递的字段完全匹配，比如模型中name字段设为必填时，验证规则里需明确name: { type: String, required: true }（根据你使用的验证库，比如Joi或Mongoose内置验证）。

3. 前端代码优化（可选） #

在提交前增加文件存在性校验，避免空请求：

const onSubmit = (e) => {
    e.preventDefault();
    if (!file) {
        toast.error('请选择要上传的文件');
        return;
    }
    const data = new FormData();
    data.append('file', file)
    data.append('name', filename)

    axios.post('http://localhost:8080/api/files', data)
        .then((response) => {
            toast.success('Upload Success')
            onSuccess(response.data)
        })
        .catch((e) => {
            toast.error('Upload Error')
        })
};

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