时间戳

首页 > 解决方案 > Angular：如何使用 *ngFor 在 Firebase 存储中循环图像文件

angular - Angular：如何使用 *ngFor 在 Firebase 存储中循环图像文件

问题描述

我正在构建一个具有图像上传功能的网络应用程序。

我可以成功地将图像上传到名为“uploads”的 Firebase 存储文件夹如何使用 *ngFor 在 HTML 上的“上传”文件夹中显示图像？我正在使用 AngularFire2，Angular 6。

  upload() {
    const file = this.selectedFiles.item(0);
    this.selectedFiles = undefined;

    this.currentFileUpload = new FileUpload(file);
    this.uploadService.pushFileToStorage(this.currentFileUpload, this.progress);
  }


  public saveFileData(fileUpload: FileUpload) {
    this.db.list(`${this.basePath}/`).push(fileUpload);
  }

标签： angularfirebasegoogle-cloud-firestoreangularfire2angular6

解决方案

如果您使用 FileList 对象来保存您的文件，您可以执行类似的操作。

<ul *ngIf="selectedFiles">
    <li *ngFor="let file of selectedFiles">
        <img src="URL.createObjectURL(file)">
    </li>
</ul

我不确定您为什么将 this.selectedFiles var 设置为未定义，我认为您必须将图像文件放在 component.ts 中的某个位置

使用 FileList obj 或 File[] 从 db 获取要显示的图像到 component.ts 后，您可以使用 component.html 中的上述代码来显示它们。

推荐阅读