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

Posted

技术标签:

【中文标题】使用angularfire将文件上传到firebase存储【英文标题】:uploading file to firebase storage using angularfire 【发布时间】:2019-09-06 00:00:33 【问题描述】:

我正在使用 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 的代码不会等待下载完成。

另一个我从来没有在 finalize 中获得下载 url 的变体

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)
      ),
    );
  

【问题讨论】:

【参考方案1】:

下载似乎正确完成。但是你用snapshotChanges observable 的第一个发射值解决了你的承诺,它没有downloadURL 属性,因此是未定义的结果。

您应该订阅 fileRef.getDownloadURL() observable 以获取您的 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 observable 完成finalize 操作触发并订阅fileRef.getDownloadURL() observable,这个 observable 应该立即发出 URL 并解析 promise。

我建议使用 observable 而不是创建新的 promise。

【讨论】:

在这种情况下,您将如何定义和初始化 downLoadUrl?我将其初始化为 downloadURL:Observable 但随后遇到了我订阅它时未定义的问题 抱歉,我误读了 RxJs 文档。在 snapshotChanges observable 完成之前,不会调用 finalize 函数。我已经编辑了代码,但我不知道订阅中的订阅是否有效。如果这种方法不起作用,我可以给你一个没有承诺的例子。 是的,没有承诺会很好。我只需要在我的调用代码中获取下载网址

以上是关于使用angularfire将文件上传到firebase存储的主要内容,如果未能解决你的问题,请参考以下文章

Angularfire2:如何从 Firebase 存储中检索文件内容

等待 angularfire 存储上传

使用Javascript上传Firebase文件

将图片从 URL 上传到 Firebase 存储

用户已登录但无法通过 AngularFire 访问 Firebase 存储

如何使用 AngularFire 从 FireBase 存储中获取文件列表