Multer/Express无法读取RN发送的FormData Postman上传正常

核心问题原因 #

Postman能正常上传是因为它会自动生成符合规范的multipart/form-data请求头（带表单分隔符boundary）和正确的文件对象格式，React Native端的问题集中在3个高频踩坑点，按顺序修改即可：

1. 不要手动设置Content-Type请求头 #

这是最高发的错误：你在axios配置里手动写死了"Content-Type": "multipart/form-data"，这种情况下请求头不会自动携带分隔表单字段必需的boundary参数，Multer无法识别请求里的文件流，就会返回req.file = undefined。

直接删掉headers里的Content-Type配置，让axios自动生成带正确boundary的请求头即可：

axios.post("http://你的服务端地址:5000/upload", formData, {
  headers: {
    Accept: "application/json",
    // 删掉 "Content-Type": "multipart/form-data" 这一行！
  },
})

2. 修复FormData中文件对象的格式 #

你当前组装的文件对象有三个问题：

• Android端expo-image-picker返回的图片URI默认不带file://前缀，Multer无法识别路径
• 文件名直接拼接Date对象会生成带空格、特殊字符的字符串，容易触发解析错误
• 缺少文件类型对应的正确原型标识，RN环境下不会被识别为二进制文件对象

把uploadImage方法里的FormData组装逻辑替换为以下代码：

const uploadImage = () => {
  const formData = new FormData();
  // 适配双端URI格式
  const fileUri = Platform.OS === 'android' 
    ? image 
    : image.replace('file://', '');
  // 生成合法文件名，带后缀
  const fileName = `${Date.now()}_profile.png`;

  formData.append("image", {
    uri: fileUri,
    name: fileName,
    type: "image/png",
    // 标记为文件对象，适配RN底层FormData实现
    __proto__: File.prototype,
  });

  // 接修改后的axios请求逻辑
  axios
    .post("http://你的服务端地址:5000/upload", formData, {
      headers: { Accept: "application/json" },
    })
    .then((res) => console.log("上传返回结果 =>", res.data))
    .catch((err) => console.log("上传报错 =>", err));
};

3. 修正本地调试的服务端地址 #

如果你用真机调试RN应用，写localhost:5000指向的是手机本身，不是运行Node服务的电脑，会导致请求实际没发到正确的服务端：

• 安卓真机调试：替换为你电脑在当前局域网的IP，例如http://192.168.3.5:5000
• 安卓模拟器调试：替换localhost为10.0.2.2（模拟器内置的宿主机映射地址）
• iOS模拟器调试：可以正常使用localhost

服务端可选优化 #

Multer不会自动创建上传目录，先手动在项目根目录新建uploads文件夹，也可以用更明确的存储配置避免路径解析问题：

// 替换原有的multer初始化代码
const storage = multer.diskStorage({
  destination: (req, file, cb) => cb(null, "uploads/"),
  filename: (req, file, cb) => cb(null, `${Date.now()}-${file.originalname}`)
})
const upload = multer({ storage });

修改完成后重启Node服务，重新加载RN应用即可正常上传，req.file会正常返回文件信息，图片也会存入uploads目录。

内容的提问来源于stack exchange，提问作者Thomas W. Smith