时间戳

首页 > 解决方案 > 为什么在将文件上传到 Firebase 存储的这段代码中似乎没有执行 RxJS finalize() 箭头函数代码？

javascript - 为什么在将文件上传到 Firebase 存储的这段代码中似乎没有执行 RxJS finalize() 箭头函数代码？

问题描述

我正在开发一个 Angular 应用程序，并且我正在创建一个必须将多个文件存储到 Firebase 存储中的服务方法，但我遇到了以下问题\怀疑。

这是我的服务方法代码：

async uploadFileIntoFirebaseStore(filesList: any[]) {
  const that = this;


  console.log("FILES TO BE SAVED: ", filesList);

  filesList.forEach(function (item, index) {
    console.log(item.name, index);
  
    // The storage path
    const path = `test/${Date.now()}_${item.name}`;

    // Reference to storage bucket
    const ref = that.storage.ref(path);

    // The main task
    that.task = that.storage.upload(path, item);

    // Progress monitoring
    that.percentage$ = that.task.percentageChanges();

    that.snapshot$ = that.task.snapshotChanges().pipe(
      tap(console.log),
      // The file's download URL
      finalize( async() =>  {
        that.downloadURL = await ref.getDownloadURL().toPromise();
        console.log("FILE NAME: ", item.name + " URL: ", that.downloadURL);  
      }),
    );
  });
}

如您所见，它需要一个数组，其中包含必须保存到 Firebase 存储中的文件列表。

我在这个列表上迭代，为每个文件创建一个唯一的名称（所以当它保​​存在 Firebase 存储上时，我避免了冲突），然后我检索存储引用并创建存储上传任务。

这里是第一个疑问：如果我要上传 n 个文件，我必须创建 n 个任务对象，或者我可以使用单个任务对象来存储 n 个文件吗？

该任务通过以下行将我的文件正确保存到 Firebase 存储中：

that.task = that.storage.upload(path, item);

文件已正确保存在 Firebase 存储中。

然后我使用snapshotChanges()来获取snapshot$ Observable 对象并进入箭头函数和finalize()箭头函数我定义了检索上传文件的 URL 以便将其打印到控制台的行为.

问题是我没有将这些信息获取到我的 Chrome 控制台中。

这是我控制台中的输出：

asset.service.ts:62 FILES TO BE SAVED:  [File]
asset.service.ts:65 Schermata da 2020-11-26 21-26-23.png 0

引用这些控制台行：

console.log("FILES TO BE SAVED: ", filesList);

这一个进入我的 foreach 循环：

console.log(item.name, index);

但我与 finalize() 箭头函数中定义的这个无关：

console.log("FILE NAME: ", item.name + " URL: ", that.downloadURL);

如果我使用调试器将断点放入 finalize() 箭头函数的第一行的第一行，这个：

that.downloadURL = await ref.getDownloadURL().toPromise();

似乎永远不会执行。

为什么？怎么了？我错过了什么？我该如何解决这个问题？

标签： javascriptangularfirebaserxjsfirebase-storage

解决方案

根据我对 firestore 的了解，我的猜测是finalize()未执行，因为snapshotChangesObservable 未完成。您也许可以重写您的代码以等待n排放（takeUntil），或者也许await ref.getDownloadURL().toPromise()有条件可以让您的文件上传completed

推荐阅读