带有 angularfire2 的 Angular - getDownloadURL() 有时不起作用。这是因为异步吗

Posted

技术标签:

【中文标题】带有 angularfire2 的 Angular - getDownloadURL() 有时不起作用。这是因为异步吗【英文标题】:Angular with angularfire2 - getDownloadURL() won't work sometimes. Is this because of async 【发布时间】:2020-06-16 08:18:13 【问题描述】:

获取https://firebasestorage.googleapis.com/xxxxx/o/hw04.docx404 firebase 下载链接错误 t code_: "storage/object-not-found", message_: "Firebase Storage: Object 'hw04.docx' does not exist.", serverResponse_: "↵ "error": ↵ "code" : 404,↵ "message": "No...not get object",↵ "status": "GET_OBJECT"↵ ↵", name_: "FirebaseError"

这是我的代码 sn-p。

upload(event) 
    const file = event.target.files[0];
    this.randomId = file.name;
    this.ref = this.afStorage.ref(this.randomId);
      this.task = this.ref.put(file);
      this.uploadProgress = this.task.percentageChanges();
      console.log("before pipe",this.task);
      this.ref.getDownloadURL().subscribe((url) => 
          console.log("link", url)
          this.downloadURL = url;
        ,
        err => 
            console.log("firebase download link err", err);
        )
    

它在 60% 的情况下都能正常工作,否则会出现 404 下载链接错误

有没有更好的方法来处理这个异步响应?

请帮帮我!

谢谢,

【问题讨论】:

你有一个竞争条件。您应该等到上传完全完成后再获取下载 URL。 你是对的。谢谢@DougStevenson github.com/angular/angularfire/issues/… 【参考方案1】:

考虑使用来自 rxjs 的 finalize 方法:

task.snapshotChanges().pipe(
    finalize(() => this.downloadURL = fileRef.getDownloadURL() )
 )
.subscribe()

上传完成后会设置下载地址。

【讨论】:

是的,我尝试过类似的方法,它奏效了。感谢您的回复@beniamin

以上是关于带有 angularfire2 的 Angular - getDownloadURL() 有时不起作用。这是因为异步吗的主要内容,如果未能解决你的问题,请参考以下文章

Angular 2 和 Angularfire2 中的三向绑定

如何在文档 + angularfire2 + angular5 中添加集合

使用 Angular2、angularfire2 和 Typescript 从 Firebase 对象中获取数据

使用 AngularFire2 (Angular2 rc.5) 访问 firebase.storage()

Angularfire2 在 Angular2 中导致 SystemJS 错误

canActivate 在订阅更改时不响应 Angular 2 路由器 AngularFire2