Angular 6-上传后获取Firebase Storage文件的下载URL

Question

我想在这里完成的事情很简单。

1. 将文件上传到Firebase存储

2. 抓住文件的链接，然后将其插入表格中。

问题是，我无法获得下载URL。

当我上传内容时，它确实会上传，但是我收到此错误消息：

Object { code_: "storage/object-not-found", message_: "Firebase Storage: Object 'rnmgm3vvpz' does not exist.", serverResponse_: "{\n  \"error\": {\n    \"code\": 404,\n    \"message\": \"Not Found.  Could not get object\"\n  }\n}", name_: "FirebaseError" }

这是要在component.ts上上传的代码：

upload(event) {
  const id = Math.random().toString(36).substring(2);
  this.ref = this.afStorage.ref(id);
  this.task = this.ref.put(event.target.files[0]);
  this.uploadState = this.task.snapshotChanges().pipe(map(s => s.state));
  this.uploadProgress = this.task.percentageChanges();
  this.downloadURL = this.ref.getDownloadURL();
}

并在component.html上：

<input type="file" (change)="upload($event)" accept=".png,.jpg" />

文件上传后如何获取downloadURL？

Answer 1

您应该在管道中添加finalize（），例如：

this.task.snapshotChanges().pipe(
  finalize(() => {
    this.downloadURL = this.ref.getDownloadURL(); // <-- Here the downloadURL is available.
  })
).subscribe();

在finalize（）步骤中，downloadURL可用，因此您可以异步地从ref中获取他。 --UPDATE
您说您正在使用Angular 6，所以我假设您使用的是最新版本的Firebase。
他们将Task的getDownloadURL（）更改为Observable，因此要获取实际的URL，您只需要订阅即可。

this.task.snapshotChanges().pipe(
  finalize(() => {
    this.ref.getDownloadURL().subscribe(url => {
      console.log(url); // <-- do what ever you want with the url..
    });
  })
).subscribe();