检测 AngularFire2 存储上传何时完成

Question

我正在将网站从 Angular 4 堆栈迁移到新的 Angular 6 和 AngularFire 2 堆栈。 AngularFire 2 方法似乎有一些变化。

我有以下代码：

let uploadTask = storageRef.child('sitemap.xml').put(sitemapBlob, metaData);

我想检测上传何时完成，我在旧版本中使用的 .on(firebase.storage.TaskEvent.STATE_CHANGED 功能似乎不再存在。

如何检测上传何时完成？

Answer 1

根据 documentation 你应该可以这样做：

const uploadTask = storageRef.child('sitemap.xml').put(sitemapBlob, metaData);    

uploadTask.snapshotChanges().pipe(
  filter(task => task.state === firebase.storage.TaskState.SUCCESS)
).subscribe(() => {
  // upload successful
});

Answer 2

编辑 1：

我创建了一个示例应用程序，用于将文件上传到 Firestorage 和 return 当前下载 URL。看看：

https://stackblitz.com/edit/angular-firestorage-test-r2sjvz

检查上传是否完成的正确方法是使用：

// get notified when the download URL is available
uploadTask.snapshotChanges().pipe(
    finalize(() => this.downloadURL = fileRef.getDownloadURL() )
 )
.subscribe()

和你的 html:

<a [href]="downloadURL | async">{{ downloadURL | async }}</a>

完整示例请参考官方文档：https://github.com/angular/angularfire2/blob/master/docs/storage/storage.md#monitoring-upload-percentage

检测 AngularFire2 存储上传何时完成

Detect when AngularFire2 storage upload is done

angularfire2

angular

angular6