React Hook Form上传文件时req.files为空，Postman可正常运行

核心问题分析 #

前端提交文件时后端req.files为undefined，但Postman测试正常，核心原因是表单编码类型错误+React Hook Form返回的表单数据未正确封装为FormData对象，导致multer无法解析文件。

具体修复步骤 #

1. 修正表单的encType属性 #

文件上传必须指定encType="multipart/form-data"，你当前写的encType="mu"是拼写错误，直接导致浏览器无法正确编码文件数据。

修改NewStampForm.jsx中的form标签：

<form onSubmit={handleSubmit(onSubmit)} encType="multipart/form-data">

2. 将表单数据转换为FormData实例 #

React Hook Form默认返回的formData是普通JS对象，无法被multer解析文件。需要手动转换为FormData，多文件需循环添加：

修改onSubmit函数：

const onSubmit = async (formData) => {
  console.log(formData);
  // 创建FormData实例
  const formDataToSend = new FormData();
  // 添加普通字段
  formDataToSend.append('title', formData.title);
  formDataToSend.append('price', formData.price);
  // 循环添加多文件
  if (formData.img) {
    Array.from(formData.img).forEach(file => {
      formDataToSend.append('img', file);
    });
  }

  try {
    const res = await axios.post(
      `${import.meta.env.VITE_BACKEND_URL}/stamps`,
      formDataToSend,
      {
        headers: {
          Authorization: authHeader,
          // 不要手动设置Content-Type，axios会自动处理带boundary的正确头
        },
      }
    );
  } catch (e) {
    console.log(e);
  }
};

3. 确认后端multer初始化正确性 #

确保路由文件中正确初始化multer与CloudinaryStorage：

const multer = require('multer');
const { storage } = require('../path/to/cloudinaryConfig'); // 替换为你的配置路径
const upload = multer({ storage });

// 路由保持原有配置即可
router
  .route("/")
  .get(verifyCircle, getAllStamps)
  .post(verifyCircle, upload.array("img"), createNewStamp);

验证修改 #

修改后重新提交表单：

• 前端控制台打印的formData中，img应为FileList对象
• 后端console.log(req.files)会输出上传的文件数组
• Cloudinary后台能看到上传的文件记录

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