Angularfire 2 保存到存储后无法查看图像答案

【问题标题】：Angularfire 2 cannot view image after saving it to storageAngularfire 2 保存到存储后无法查看图像
【发布时间】：2018-08-17 11:52:35
【问题描述】：

我正在使用 Angular 5 并尝试将用户头像上传到 Firebase 存储，然后获取图片的下载 url 以显示它并将该 url 保存到他们的个人资料中。

我可以使用以下代码上传图片：

uploadFile() {

// // The storage path
const path = `profile_images/${this.profile.user_id}`;

// // Totally optional metadata
const customMetadata = { app: 'Some extra data' };

// The main task
this.task = this.storage.upload(path, file, { customMetadata })

// Progress monitoring
this.percentage = this.task.percentageChanges();
this.snapshot = this.task.snapshotChanges().pipe(
  tap(snap => {
    if (snap.bytesTransferred === snap.totalBytes) {

      // Never gets called *************
      console.log('store the path');

    }
  })
)

this.downloadURL = this.task.downloadURL(); 

}

如果我进入 firebase 控制台，我可以看到图像，如果我将 downloadUrl 复制到剪贴板并将其粘贴到浏览器中，我可以看到图像。然后我尝试使用以下代码获取查看存储图像所需的 url：

const storageRef = this.storage.ref(path).getDownloadURL().subscribe(url => 
{
  console.log('url', url);

  this.db.collection('photos').add( { url });

  // This url generates the error
  this.profile.image_url = url;

  this.downloadURL = url;

} );

问题是这里返回的url会产生这个错误：

{
  "error": {
    "code": 403,
    "message": "Permission denied. Could not perform this operation"
  }
}

我的存储安全规则是：

service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth!=null;
    }
  }
}

任何帮助将不胜感激，已经解决这个问题好几天了

谢谢 PK

【问题讨论】：

标签： firebase firebase-storage angular5 angularfire2

【解决方案1】：

正如您所提到的，您的代码没有将路径存储在 Firestore 中，我在“uploadFile()”函数中更改了以下几行并且它起作用了：

// * * *
// Progress monitoring
this.percentage = this.task.percentageChanges();
this.snapshot = this.task.snapshotChanges();
// don't need this ^, but I still kept it
// then changed following lines
this.task.snapshotChanges().subscribe(snap => {
    if (snap.bytesTransferred === snap.totalBytes) {
       // Update firestore on completion
       this.db.collection('photos').add( { path, size: snap.totalBytes });
    }
});

【讨论】：