Firebase v9如何上传图片？上传后预览加载错误怎么解决

核心问题原因 #

• 异步时序错误：uploadString 为异步方法，原代码未等待上传完成就调用getDownloadURL拉取资源地址，且函数提前返回未赋值的imageUrl，获取到的地址对应资源尚未上传完成，无法被识别为有效图片。
• 异步语法混用：async/await与then回调混用导致执行时序不可控，进一步放大了异步逻辑出错概率。
• 编码格式不匹配：如果实际传入的base64字符串携带data:image/jpg;base64, 前缀，直接使用base64作为第三个参数会导致文件内容编码错误，无法被解析为图片。

修复后的代码 #

async storeImage(img: { uri: string; base64: string }, userId: string) {
    try {
      const imageName = img.uri.substring(img.uri.length - 40);
      const imageRef = ref(this.storage, `profile-images/${userId}/${imageName}`);
      // 等待上传操作完全完成
      await uploadString(imageRef, img.base64, 'base64', { contentType: "image/jpg" });
      console.log("image stored");
      // 上传完成后再拉取下载地址
      const imageUrl = await getDownloadURL(imageRef);
      console.log('getDownloadURL', imageUrl);
      // 原代码中无实际作用的XHR逻辑可直接删除，有其他业务需求再保留
      return imageUrl
    } catch (error) {
      console.log(error);
      throw error;
    }
  }
}

额外排查点 #

• 若修改后仍有报错，可先检查base64内容是否携带data:前缀，如果携带前缀，将uploadString的第三个参数改为'data_url'即可，不需要手动裁剪前缀。
• 确认Firebase Storage安全规则放开了对应路径的读写权限。
• 可先将base64内容复制到本地转码工具，验证原始内容本身是完整可解析的图片。

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