React Native图片无法上传至Firebase Storage存储桶问题求助

问题根源梳理 #

1. 首先你混淆了Firebase的两个服务：Firestore是文档型NoSQL数据库，仅用于存储结构化文本/JSON数据，你要上传文件用的是Firebase Cloud Storage，二者是相互独立的服务。
2. 你通过const testImage = require('../assets/mom.png')拿到的返回值13是打包工具（Webpack/React Native打包器）生成的静态资源索引ID，完全不是图片的二进制内容、Blob或File对象，直接传入put方法只会把数字作为文本内容上传，自然得不到你要的图片文件。

解决方案 #

不需要提前转换图片格式，jpeg、png都可以直接上传，只要你拿到正确的图片二进制内容即可，分两种常见场景处理：

场景1：Web开发环境

如果你是在普通Web项目中使用：

• 如果是用户上传场景，直接从文件选择器的回调中拿File对象上传即可：

// 绑定input[type=file]的onChange事件
const handleFileChange = (e) => {
  const selectedImage = e.target.files[0]
  const ref = storage.ref().child('mom.jpeg')
  // 可主动指定contentType避免识别错误
  ref.put(selectedImage, { contentType: 'image/jpeg' })
    .then(snapshot => console.log('上传成功'))
}

• 如果要上传项目内置的静态资源，先把资源转为Blob再上传：

const sendToStorage = async () => {
  // require返回的是静态资源的可访问路径，先请求拿到Blob
  const imageRes = await fetch(require('../assets/mom.png'))
  const imageBlob = await imageRes.blob()
  const ref = storage.ref().child('mom.png')
  await ref.put(imageBlob, { contentType: 'image/png' })
  console.log('上传成功')
}

场景2：React Native开发环境

React Native中require本地图片返回的是数字ID，需要先通过工具库拿到本地资源的真实路径再转Blob：

// 以Expo环境为例
import * as FileSystem from 'expo-file-system'
import { Asset } from 'expo-asset'

const sendToStorage = async () => {
  const asset = Asset.fromModule(require('../assets/mom.png'))
  await asset.downloadAsync()
  const imageBlob = await fetch(asset.localUri).then(res => res.blob())
  const ref = storage.ref().child('mom.png')
  await ref.put(imageBlob, { contentType: 'image/png' })
  console.log('上传成功')
}

补充注意事项 #

上传时建议主动指定文件的contentType元信息，或者给存储路径加上对应图片后缀（比如mom.png），避免Cloud Storage默认把文件识别为通用二进制流，导致后续访问时无法正常渲染为图片。

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