React Native上传图片/文件到服务器时FormData提交报网络错误如何解决

核心错误原因 #

你当前的写法存在两个最常见的React Native文件上传错误：

• 直接将原始选择的文件对象传入FormData.append，不符合RN内置fetch要求的文件格式
• 手动设置了Content-Type: multipart/form-data，导致请求缺失必要的boundary分隔符，服务器无法正确解析请求体

修复步骤 #

1. 统一处理不同来源的文件参数 #

RN的fetch上传文件时，传入FormData的文件必须是包含uri、name、type三个字段的对象，需要根据你的文件来源适配字段映射：

// 适配不同来源的文件结构
function getUploadFile(rawFile) {
  // 相册返回数组的情况
  if (Array.isArray(rawFile)) {
    const item = rawFile[0];
    return {
      uri: item.uri,
      name: item.name,
      type: item.type
    }
  }
  // 相机返回带assets字段的情况
  if (rawFile.assets) {
    const asset = rawFile.assets[0];
    return {
      uri: asset.uri,
      name: asset.fileName,
      type: asset.type
    }
  }
  // 相册返回单个对象的情况
  return {
    uri: rawFile.uri,
    name: rawFile.name,
    type: rawFile.type
  }
}

2. 修正FormData和请求配置 #

删除手动设置的Content-Type请求头，fetch发送FormData时会自动生成带正确boundary的请求头：

const formData = new FormData();
const uploadFile = getUploadFile(selectedFile);
formData.append('SellerBrandsWeDeal', uploadFile);

fetch('http://api', {
  method: 'POST',
  headers: {
    Accept: '*/*'
    // 不要手动添加Content-Type: multipart/form-data
  },
  body: formData,
})
.then(res => res.json())
.catch(err => {
  console.log('上传错误详情：', err); // 打印错误信息便于进一步排查
})

其他可选排查点 #

如果修改后仍然报错，按以下顺序排查：

• 检查安卓端明文请求权限：你的接口是http协议，安卓9及以上默认禁止明文请求，需要在android/app/src/main/AndroidManifest.xml的<application>标签添加属性android:usesCleartextTraffic="true"；iOS端需要在info.plist中配置NSAppTransportSecurity允许HTTP请求。
• 检查文件读取权限是否正常申请：安卓13及以上需要根据文件类型申请对应READ_MEDIA_*权限，低版本需要申请READ_EXTERNAL_STORAGE权限。
• 如果content://协议的URI上传失败，可以用文件操作库将content URI转换为本地file://协议的缓存路径后再上传。
• 确认服务端接口要求的表单字段名是否为SellerBrandsWeDeal，以及是否有其他必填请求头（比如鉴权token）。

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