使用rn-fetch-blob上传二进制图片出现空流问题，求解决方案

问题描述 #

尝试通过rn-fetch-blob以二进制形式上传图片（因普通fetch触发网络错误选用该库），但上传后服务器存储的文件大小为0字节，实际传递的是空流。当前使用的代码如下：

const path = file.path.replace('file://', '');
const uploadPath = RNFetchBlob.wrap(path);

RNFetchBlob.fetch(
    'PUT',
      SERVER_URL,
      uploadPath,
  )
    .then(res => {
      console.log('image uploaded res ---> ',res);
    })
    .catch(err => {
      console.log(err);
    });

解决方案 #

1. 修正fetch方法参数顺序 #

rn-fetch-blob的fetch方法参数顺序为 method, url, headers, body，你直接将文件路径作为第三个参数（本该是请求头的位置），导致文件未被正确作为请求体传递，服务器自然收到空流。

2. 添加二进制文件请求头 #

上传二进制文件需要指定Content-Type，让服务器识别数据类型，可根据图片实际类型设置（如image/jpeg、image/png），或通用的application/octet-stream。

3. 修正后的代码示例 #

const path = file.path.replace('file://', '');
const uploadPath = RNFetchBlob.wrap(path);

// 优先使用文件自带的MIME类型，无则用通用二进制类型
const mimeType = file.mimeType || 'application/octet-stream';

RNFetchBlob.fetch(
  'PUT',
  SERVER_URL,
  {
    'Content-Type': mimeType,
  },
  uploadPath
)
.then(res => {
  console.log('image uploaded res ---> ', res);
})
.catch(err => {
  console.log(err);
});

额外排查点 #

• 验证文件路径有效性：通过RNFetchBlob.fs.exists(path)检查替换后的路径是否存在对应文件。
• 确认文件读取权限：Android 10+需注意Scoped Storage限制，确保应用有读取目标文件的权限。
• 补充Content-Length头（可选）：部分服务器需要明确文件大小，可通过文件状态获取后添加：

  RNFetchBlob.fs.stat(path).then(stat => {
    RNFetchBlob.fetch(
      'PUT',
      SERVER_URL,
      {
        'Content-Type': mimeType,
        'Content-Length': stat.size.toString(),
      },
      uploadPath
    )
    .then(res => console.log(res))
    .catch(err => console.log(err));
  });
  

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