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

Posted

技术标签:

【中文标题】如何使用 AngularFire 从 FireBase 存储中获取文件列表【英文标题】:How to get a list of files from FireBase Storage using AngularFire 【发布时间】:2021-11-11 20:40:59 【问题描述】:

我有一个 Angular 12 应用程序,它使用 Firebase 存储将一些文件存储在一个目录中。我使用 AngularFire 解决方案实现了与 Firebase 的集成。关于如何使用 AngularFire 存储功能的文档似乎不包括如何列出目录中的所有文件。 Firebase 网站上有一些与此相关的文档(listAll),但我似乎无法使用 AngularFire 使代码在 Angular 中工作。以下 Firebase 网站的代码示例...

import 
  getStorage,
  ref,
  listAll
 from "firebase/storage";

const storage = getStorage();

// Create a reference under which you want to list
const listRef = ref(storage, 'files/uid');

// Find all the prefixes and items.
listAll(listRef)
  .then((res) => 
    res.prefixes.forEach((folderRef) => 
      // All the prefixes under listRef.
      // You may call listAll() recursively on them.
    );
    res.items.forEach((itemRef) => 
      // All the items under listRef.
    );
  ).catch((error) => 
    // Uh-oh, an error occurred!
  );

我已经(通过 AngularFire 文档)弄清楚了如何获取参考等。(它与示例中的不同)但是当我到达代码的“listAll”部分时遇到了问题。

这是我在 Angular 中能走多远...

import 
  Component,
  OnInit
 from '@angular/core';
import 
  Observable
 from 'rxjs';
import 
  AngularFireStorage
 from '@angular/fire/compat/storage';

@Component(
  selector: 'app-openvideo',
  templateUrl: './openvideo.component.html',
  styleUrls: ['./openvideo.component.css'],
)
export class OpenvideoComponent implements OnInit 
  subscription;
  constructor(private storage: AngularFireStorage) 

  async getVideoList() 
    const directory = 'samplevideos/';
    const listRef = this.storage.ref(directory);
    //Can't make the sample code work here
  

  ngOnInit(): void 

  ngOnDestroy() 

所需的状态是我正在检索存储在目标目录中的文件列表,然后我可以对该列表执行一些操作(即向用户显示列表,允许他们选择一个项目等。我觉得我的这里的困难是原生 Firebase 存储 API 和它的 AngularFire 实现中存在的文档之间的文档差距的组合,以及对承诺、可观察对象等的薄弱理解。作为旁注,我相信我已经完成了正确的配置(更改为 AppModule 等)以在我的组件中启用 firebase 解决方案并在其他组件中成功使用它(例如上传文件),所以我认为问题不是 angularfire 的核心配置之一。任何帮助将不胜感激。

【问题讨论】:

您使用的是哪个版本的 angular/fire?还有,你是说要在调用listAll函数后显示目录中的每个文件? 我正在使用 Angular/Fire 的第 7 版。是的,这是正确的,我想在调用 listAll 函数后显示目录中每个文件的列表 您要做的是遍历从 listAll 返回的每个文件引用,然后根据文档下载文件或获取 downloadURL 【参考方案1】:

经过反复试验,我想出了如何在 Angular 12 中完成这项工作。对于那些有兴趣在 Firebase 存储库中获取文件列表然后填充数组以便显示文件名和在您的 Angular 组件中下载链接,我使用的代码如下所示。我将是第一个承认我不是世界上最伟大的编码员的人,尽管使用风险自负!

//This is where you store the file names and download url's
filelist = []

//This is the function you call (put it in ngOnInit or something of the like) to get the filenames
getFileList() 
  const ref = this.storage.ref('');
  let myurlsubscription = ref.listAll().subscribe((data) => 
    for (let i = 0; i < data.items.length; i++) 
      let name = data.items[i].name;
      let newref = this.storage.ref(data.items[i].name);
      let url = newref.getDownloadURL().subscribe((data) => 
        this.filelist.push(
          name: name,
          videolink: data
        );
      );
    
  );

【讨论】:

以上是关于如何使用 AngularFire 从 FireBase 存储中获取文件列表的主要内容,如果未能解决你的问题,请参考以下文章

如何格式化和显示从 AngularFire 返回的 Firestore 数据?

AngularFire2:实时数据库:如何获取键和值

使用 Angular2、angularfire2 和 Typescript 从 Firebase 对象中获取数据

使用 angularfire2 时如何访问本机 Firebase 对象?

如何使用angularfire2检查孩子是不是存在于firebase列表中

使用 ionic 3 中的 Angularfire2 从 Firestore 获取集合文档的 ID [重复]