Question

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

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

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

Answer 1

正如你所提到的，你的代码没有在Firestore中存储路径，我更改了以下内容＆upload;＆＃39; uploadFile（）＆＃39;功能和它的工作：

@Configuration

将其保存到存储空间后，Angularfire 2无法查看图像

1 个答案: