Firebase Storage出现Error loading preview，put方法上传图片不生效如何解决？

问题定位与修复方案 #

• 核心错误：你混淆了Firebase服务实例，fireStore是Firebase Firestore云数据库的实例，无法调用Storage存储服务的ref方法，需要替换为Firebase Storage的实例，修改后的代码示例：

// 先初始化Firebase Storage实例
const storage = firebase.storage()
var metadata = {
  contentType: 'image/png'
}
const task = storage.ref(fileName).put(uploadUri, metadata)

try {
  await task
  setUpLoading(false)
} catch(err) {
  console.log(err)
}

• 其他可能导致上传失败的排查点：

1. uploadUri类型错误：浏览器端put方法仅支持Blob、File、Uint8Array类型的入参，如果你传入的是本地文件路径字符串，需要先转换为对应的二进制对象再调用上传方法。
2. Storage安全规则拦截：默认的Storage安全规则要求用户完成登录鉴权才能读写资源，如果你未接入Firebase Auth，可临时修改测试规则验证逻辑（仅测试用，上线前必须修改为符合业务的安全规则）：

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if true;
    }
  }
}

3. 文件名非法：检查fileName是否包含未转义的特殊字符、多余层级斜杠，避免路径解析出错。

内容的提问来源于stack exchange，提问作者Augustus Flynn