React Native上传图片至Firebase Storage失败问题求助

现有方案的问题分析 #

• 第一种方案：response.blob()是异步方法，未添加await导致上传的是Promise对象而非Blob，且未指定文件MIME类型，最终存储为octet-stream。
• 第二种方案：React Native环境不支持Node.js的Buffer API，直接使用Buffer.from会导致二进制数据处理错误，生成的Blob损坏，无法正常打开。

正确实现步骤 #

1. 提取有效base64数据和类型信息 #

先移除base64字符串的前缀（如果存在），同时获取图片的原始MIME类型：

const asset = result.assets[0];
// 移除base64前缀（如"data:image/png;base64,"）
const base64Data = asset.base64.replace(/^data:image\/\w+;base64,/, '');
const mimeType = asset.type; // 示例值："image/png"或"image/jpeg"

2. 兼容React Native的base64转Blob方式 #

用Uint8Array替代Buffer处理二进制数据：

const bytes = Uint8Array.from(atob(base64Data), c => c.charCodeAt(0));
const blob = new Blob([bytes], { type: mimeType });

3. 正确上传并获取下载链接 #

确保异步操作使用await，同时指定文件元数据保证类型识别正确：

// 假设imgRef是你创建的Storage引用
const snapshot = await uploadBytes(imgRef, blob, {
  contentType: mimeType
});

// 获取下载链接
const url = await getDownloadURL(snapshot.ref);
userDetails.update_details("image_1", url);

完整代码示例 #

const handleUpload = async (result) => {
  if (!result.assets?.length) return;
  
  const asset = result.assets[0];
  const base64Data = asset.base64.replace(/^data:image\/\w+;base64,/, '');
  const mimeType = asset.type;

  // 转换为兼容React Native的二进制数据
  const bytes = Uint8Array.from(atob(base64Data), c => c.charCodeAt(0));
  const blob = new Blob([bytes], { type: mimeType });

  try {
    const snapshot = await uploadBytes(imgRef, blob, { contentType: mimeType });
    const url = await getDownloadURL(snapshot.ref);
    userDetails.update_details("image_1", url);
  } catch (error) {
    console.error("上传错误:", error);
  }
};

额外注意事项 #

• 确认Firebase Storage规则允许当前用户执行上传操作
• 检查Image Picker配置，确保已开启base64: true以获取base64数据
• 为避免文件覆盖，可给文件名添加唯一后缀（如时间戳）

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