Firebase 存储使用量是如何计算的？答案

【问题标题】：How is Firebase storage usage calculated?Firebase 存储使用量是如何计算的？
【发布时间】：2020-09-20 16:47:07
【问题描述】：

我有一个 ionic 应用程序，它可以上传一些照片并下载 url 以将其存储在 mlab 中，这很好。我可以一次上传 10 张照片并下载它们，即 100 次上传/下载。然后我在卡片组件中打印照片。

问题是每次点击我的主页时，我都会看到很多调用 firebase 来检索图像。因此，我在 firebase 上查看了我的免费帐户 SPARK 计划，仅用 3 个用户/10 张照片（上传/下载）并在我的主页上阅读，我在一天内就达到了 20k 次操作。

正如我所说，我不明白为什么如果图像是从 mlab 加载的，那应该打印一次而不是加载这么多次。

   private uploadPhotosToFirebase() {
    this.showLoading();
    return Promise.all(this.arrPhotos.map(photo => this.upload(photo)))
      .then((urls: string[]) => {
        console.log(`All success`, urls);
        urls.forEach((url) => this.photosUrlDownload.push(url));
        return Promise.resolve();
      })
      .catch((error) => {
        console.log(`Some failed: `, error)
        return Promise.reject();
      });
  }

  private upload(photo: PhotoModel): Promise<any> {
    var storageRef = this.firebaseStorage.storage.ref(this.userId).child(photo.name);

    return storageRef.putString(photo.base64.replace('data:image/jpeg;base64,', ''), 'base64')
      .then((snapshot) => {
        // uploaded OK
        return storageRef.getDownloadURL()
          .then((url) => {
            // downloaded OK
            return url;
          })
          .catch((err) => {
            // downloaded KO
            return err;
          });
      }).catch((error) => {
        // uploaded KO
        return error;
      });
  }

<ion-card>
  <div class="relative">
    <img class="absolute owner-image absolute small-image" src="https://ionicframework.com/docs/demos/api/card/madison.jpg" alt=""> <!-- QUITAR-->
    <ion-card-subtitle class="absolute color-white type-product">{{item.type}}</ion-card-subtitle>
    <img class="main-image" *ngIf="item && item.photos && item.photos[0]" [src]="sanitizer.bypassSecurityTrustUrl(item.photos[0])">

    <ion-icon (click)="likeProduct()" class="absolute heart color-white small-image" [name]="liking === true ? 'heart' : 'heart-outline'"></ion-icon>
  </div>
  <div class="content-wrapper">
    <ion-card-header>
      <ion-card-subtitle>{{item.name}}</ion-card-subtitle>
      <ion-card-title>{{item.price}}€</ion-card-title> <!-- CURRENCY PIPE HERE -->
    </ion-card-header>
    <ion-card-content *ngIf="item && item.description">{{item.description}}</ion-card-content>
  </div>
</ion-card>

【问题讨论】：

不应该那样做，当你点击图片或者你说的点击任何页面的时候？
当我点击我的应用程序的任何页面时。我现在上传一张图片，所以你可以看到，如果我点击任何地方，它会再次加载它，在网络中我看到类型 img 并被转换为 txt 并在（内存）中
@MostafaHarb 我刚刚上传了一张照片。谢谢你的帮助，我快疯了
@MostafaHarb 是因为这个：[src]="sanitizer.bypassSecurityTrustUrl(item.photos[0])"，我的卡组件中有这个，但我不确定它是否建议删除消毒剂，我在上传到firebase之前用它来预览图像，但是在上传到firebase之后是必要的吗？
不，这不是必须的，即使在上传之前，您也可以使用 reader() 类来预览图像。

标签： javascript firebase ionic-framework firebase-storage ionic5

【解决方案1】：

直接在 HTML 模板中添加函数调用被认为是一种不好的做法，因为它会在每次触发更改检测时运行。

这将导致性能问题和您遇到的问题（对资源的过度请求）。

解决此问题的正确方法是使用自定义管道并确保将其声明为 pure pipe，这样 Angular 将缓存结果，并且不会在每次触发更改检测时运行它。

import { Pipe, PipeTransform } from "@angular/core";
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';

@Pipe({
    name: 'safeURL'
})
export class SafeUrlPipe implements PipeTransform {

    constructor(
        protected sanitizer: DomSanitizer
    ) { }

    public transform(value: string): SafeUrl {
        if (!value || value === "none") {
            return "assets/img/no_image_placeholder.png"
        } else {
            return this.sanitizer.bypassSecurityTrustUrl(value);
        }
    };

};

【讨论】：