Question

我正在使用angularfire2将图像上传到Firebase存储。虽然我在等待我的代码以获取下载URL的时间上遇到麻烦，但上传工作正常。这是选择文件时的代码

 async onFilesAdded(event){
      console.log("file added")
      if (event.target.files.length > 0) {
        const file = event.target.files[0];
        console.log("File name is:" + file.name)

         await this.dataSvc.pushUpload(file).then(
            (res) => {
              console.log("download url is::" + this.dataSvc.downloadURL)
            },
            (err) => console.log("fail to upload file:" + err)
          )


      }
    }

我的服务如下实现

 pushUpload(file: File) {
    const filePath = '/' + file.name;
    const fileRef = this.storage.ref(filePath);

    return new Promise<any>((resolve, reject) => {
         const task = this.storage.upload(filePath, file);

          task.snapshotChanges().pipe(
      finalize(() => this.downloadURL = fileRef.getDownloadURL() )
   ).subscribe(
        res => resolve(res),
        err => reject(err))
   }
   )
  }

我希望等到诺言解决后才能看到下载网址。但是我的代码似乎没有等待，我未定义downloadUrl，几秒钟后，下载URL实际显示在服务中。因此，基本上我的代码调用pushUpload并不是在等待下载完成。

另一种变体，其中我从没敲定过内部下载网址

pushUpload(file: File) {
    const path = '/' + file.name;
    const ref = this.storage.ref(path);

    let task = this.storage.upload(path, file);
    let snapshot   = task.snapshotChanges().pipe(
      finalize( async() =>  {
        this.downloadURL = await ref.getDownloadURL().toPromise();
        console.log("download url i got is:" + this.downloadURL)
      }),
    );
  }

Answer 1

下载似乎已正确完成。但是，您可以使用snapshotChanges中可观察到的第一个发射值来解决您的承诺，该值不具有属性downloadURL，因此结果不确定。

您应该订阅fileRef.getDownloadURL()，以获取您的URL。

pushUpload(file: File) {
    const filePath = '/' + file.name;
    const fileRef = this.storage.ref(filePath);

    return new Promise<any>((resolve, reject) => {
        const task = this.storage.upload(filePath, file);

        task.snapshotChanges().pipe(
            finalize(() => fileRef.getDownloadURL().subscribe(
                res => resolve(res),
                err => reject(err));
            )
        ).subscribe();
    })
}

使用promise方法时，代码看起来有些难看。我不知道您是否可以在订阅中进行订阅，我以前从未这样做过。

一旦snapshotChanges可观察对象完成finalize操作触发器并订阅了fileRef.getDownloadURL()可观察对象，该可观察对象应立即发出URL并解决承诺。

我建议使用可观察的方法，而不是创建新的承诺。

使用angularfire将文件上传到Firebase存储

1 个答案: