React Native传文件到Multer时req.body空、req.file未定义解决方法

安全阿岳

2026-8-28

问题根因

服务端Multer配置本身无异常（Postman调用正常可验证），问题全部出在客户端请求构造环节，核心原因有两个：

手动指定Content-Type请求头丢失了必填的boundary参数
multipart/form-data类型的请求必须携带动态生成的boundary字符串作为分隔符，用来拆分请求体内的普通字段和文件字段。代码中手动写死'Content-Type': 'multipart/form-data;'的配置，会覆盖网络库自动生成的带合法boundary的请求头，服务端收到请求后无法识别字段边界，自然解析不出任何表单内容，最终表现为req.body为空对象、文件字段全为undefined。
React Native环境下FormData传参存在格式兼容问题
代码中直接向FormData追加普通JS对象作为文件值，部分RN版本、网络库版本无法自动将该对象识别为文件类型，会做错误序列化；同时安卓平台返回的图片uri默认不带file://协议前缀，也会导致文件识别失败。

可行解决方案

按以下顺序修改客户端代码即可，服务端无需调整：

删除手动配置的Content-Type请求头
发送FormData请求时，不要手动设置Content-Type，由网络库自动识别FormData类型，生成带合法boundary的请求头。修改后的请求基础写法：
```
// 移除headers里的Content-Type配置
axios.post('upload-image', formData)
```

修正文件字段的格式，做平台兼容处理
追加文件到FormData时，补全uri协议前缀，给type、name字段加兜底值，避免空值导致解析失败：

const asset = result.assets[0]
// 安卓端返回的uri默认不带file://前缀，手动补全，iOS端自带无需处理
const normalizedUri = asset.uri.startsWith('file://') ? asset.uri : `file://${asset.uri}`
formData.append('name', 'Alexander')
formData.append('avatar', {
  uri: normalizedUri,
  type: asset.type ?? 'image/jpeg',
  name: asset.fileName ?? `avatar_${Date.now()}.jpg`
})

处理axios的序列化兼容问题（前两步无效时使用）
部分旧版本axios在RN环境下会错误序列化FormData，需要手动关闭默认的请求转换逻辑，确保FormData原样发出：
```
axios.post('upload-image', formData, {
  transformRequest: (data, headers) => {
    // 清除axios自动注入的错误Content-Type头
    delete headers['Content-Type']
    return data
  }
})
```

验证标准：修改完成后抓包查看请求头，Content-Type值应包含boundary=xxxx的随机后缀，此时服务端即可正常解析字段和文件。

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