React传图至Node服务时route.post中req.file为何为undefined？

你遇到的核心问题是前端请求格式错误+后端multer字段不匹配，下面是具体问题分析和修复方案：

问题1：React端axios请求参数错误 #

你的axios.post写法存在三个关键错误：

• 第二个参数直接传formData即可，不需要包裹成{ formData }，否则后端接收的是嵌套对象而非真正的FormData
• header拼写错误，正确写法是headers
• 手动设置Content-Type: multipart/form-data会丢失请求边界（boundary），axios会自动根据FormData生成正确的请求头，无需手动配置

问题2：前后端字段名不匹配 #

前端FormData里append的键是"file"，但后端multer配置的是upload.single("tmpImage")，两者字段名必须完全一致才能正确解析文件

修复后的代码 #

React端修改： #

const formData = new FormData();

// 注意：如果是React Native环境，确保uri是file://开头的格式
formData.append("file", {
  uri: image.uri,
  type: image.type,
  name: "tmpImage",
});

try {    
  await axios.post(`${BACKEND_URL}/recipes/photo`, formData, {
    headers: {
      // 无需手动设置Content-Type，axios自动处理
    },
  });
} catch (error) {
  console.error("Error when sending image");
}

Node.js路由修改： #

recipesRoutes.post(
  "/photo",
  upload.single("file"), // 改为和前端一致的字段名"file"
  async (req: Request, res: Response) => {
    console.log("req files =>", req.files);
    console.log("req file =>", req.file);

    return res.status(200).send();
  }
);

额外注意事项 #

• 确保后端uploads目录已存在，否则multer会抛出文件写入错误
• 如果是React Native环境，部分图片uri格式（如assets-library://）需要转换为file://格式才能被正确识别，可借助react-native-fs等工具处理
• Express的express.json()和express.urlencoded()中间件不影响multipart/form-data的解析，无需移除

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