React Native中FormData添加filename选项不生效如何解决？

问题根因 #

React Native 内置的FormData实现与Web标准存在差异：

• 不支持append方法第三个参数传入配置对象的写法
• 原生无法直接识别ArrayBuffer类型作为文件参数
• 代码中引入的Node.js版form-data第三方包不兼容RN环境，也会导致参数配置失效

解决方案 #

方案1：转Blob后直接拼接（通用轻量方案） #

无需额外依赖，适合小文件上传场景：

// 移除引入的第三方form-data包，直接使用RN全局内置的FormData
const form = new FormData()
// 1. 把ArrayBuffer转为Blob，可根据实际文件类型设置MIME值，不确定则用兜底值
const fileBlob = new Blob([new Uint8Array(file.data)], {
  type: file.type || 'application/octet-stream'
})
// 2. append第三个参数直接传文件名字符串即可，无需套对象
form.append('file', fileBlob, file.name)

方案2：写入临时文件后上传（大文件推荐） #

适合大文件上传，避免内存溢出，需要用到react-native-fs库：

import RNFS from 'react-native-fs'
import { Platform } from 'react-native'

// 1. 将ArrayBuffer转为base64写入本地临时路径
const tempPath = `${RNFS.TemporaryDirectoryPath}/${file.name}`
await RNFS.writeFile(tempPath, Buffer.from(file.data).toString('base64'), 'base64')

const form = new FormData()
// 2. 传入RN识别的文件对象格式
form.append('file', {
  uri: Platform.OS === 'ios' ? `file://${tempPath}` : tempPath,
  name: file.name,
  type: file.type || 'application/octet-stream'
})

注意事项 #

• 发送请求时不要手动设置Content-Type: multipart/form-data请求头，RN的请求适配器会自动生成带boundary分隔符的正确头，手动配置会导致服务端解析失败
• 大文件上传优先选择方案2，Blob方案占用内存较高，超过10M的文件容易出现卡顿或崩溃

内容的提问来源于stack exchange，提问作者Federico Ponce de León