React Native中如何从API下载blob文件保存到手机本地存储

问题背景 #

• 调用API时接口直接返回图片二进制流，无公网可直接访问的图片下载URL，常规依赖直链的图片下载、保存到手机本地的方案无法使用
• 接口请求配置responseType: 'blob'时，拿到的响应数据结构如下：

"data": {
  "_data": {
    "__collector": [Object],
    "blobId": "a3432f49-13a1-4e2b-873d-a4dce3b71191",
    "offset": 0,
    "size": 142788
  }
}

实现步骤 #

1. 提取标准Blob实例 #

你看到的带_data、blobId字段的结构是跨端框架/JS引擎内部的Blob代理私有属性，不是可直接操作的完整Blob对象，不要直接操作内部字段。

• 如果你用axios/fetch类请求库，设置responseType: 'blob'后，响应体顶层的data字段就是标准Blob实例，直接取这个实例即可
• 校验Blob有效性：打印blob.type确认值为图片MIME类型（如image/png、image/jpeg），如果类型异常优先检查接口响应头Content-Type配置是否正确

2. 生成临时访问URI #

不需要为公网访问额外上传文件，直接基于内存中的Blob生成应用内可访问的临时URI即可：

• 端内H5/小程序场景：调用URL.createObjectURL(blob)生成临时Blob地址，该地址仅在当前应用生命周期内有效
• React Native/原生App场景：调用框架提供的Blob转URI方法（如react-native-blob-util的blobToUri、RN内置Blob模块的对应方法），将Blob实例转为应用沙盒内的临时文件URI

注意：这类临时URI会在应用关闭后自动回收，不会长期占用设备存储空间，无需手动清理

3. 执行本地保存操作 #

根据运行环境调用对应保存能力即可：

• H5场景：创建隐藏的<a>标签，将临时URI赋值给href属性，设置download属性为自定义图片文件名（如img_${Date.now()}.png），主动触发标签的click事件，移动端会自动弹出保存到相册的授权提示，用户确认后即可完成保存
• App场景：先申请对应系统权限（iOS申请相册写入权限、Android申请存储/相册访问权限），再调用系统相册API（如React Native官方的CameraRoll.save、原生端的相册写入接口）传入临时URI，即可直接将图片写入手机本地存储/系统相册

常见踩坑 #

• 不要尝试手动拼接_data结构内的blobId作为文件访问路径，该ID仅为JS引擎内部标记二进制块的索引，不是可访问的文件路径，直接使用会触发文件不存在错误
• 如果拿到的Blob大小和接口返回的Content-Length不一致，检查请求是否被拦截器二次处理、是否存在跨域响应头缺失导致的二进制数据截断问题

内容的提问来源于stack exchange，提问作者Abdullah Bilal Khanzada