React Native iOS端文件上传失败 有哪些可行的实现方案？

问题根源 #

该问题是React Native iOS端fetch实现的原生适配缺陷，直接将File对象作为multipart/form-data类型的请求体时不会被正确序列化，Android端实现没有这个问题。

可行解决方案 #

• 方案一：使用FormData封装文件（无额外依赖，改造成本最低）
  不要手动指定content-type: multipart/form-data请求头，运行时会自动生成带分隔boundary的正确请求头，手动配置反而会导致服务端解析失败。
  代码示例：

  const formData = new FormData();
  // 第一个参数为后端要求的上传字段名，可根据实际业务调整
  formData.append('file', file, file.name);
  
  const resp = await fetch(uploadUrl, {
      method: 'POST',
      body: formData,
  });
  

• 方案二：使用React Native专属文件处理库上传
  如果fetch方案仍存在兼容问题（比如大文件上传崩溃、进度无法监听等），可以使用react-native-blob-util库实现上传，该库对iOS文件系统的适配更完善，稳定性更高。
  代码示例：

  import RNFetchBlob from 'react-native-blob-util';
  
  const uploadResult = await RNFetchBlob.fetch(
    'POST',
    uploadUrl,
    {
      'Content-Type': 'multipart/form-data',
    },
    [
      {
        name: 'file',
        filename: file.name,
        type: file.type,
        data: RNFetchBlob.wrap(file.uri)
      }
    ]
  );
  // 解析接口返回的JSON数据
  const resp = uploadResult.json();
  

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