如何在 Angular 的本地存储中存储文件（2 及更高版本）答案

【问题标题】：How to store a FILE in Local Storage in Angular (2 and up)如何在 Angular 的本地存储中存储文件（2 及更高版本）
【发布时间】：2018-07-06 13:49:20
【问题描述】：

我只想将图像或 pdf 或任何类型的文件存储在本地存储中。
那么，有没有办法将文件存储在 LocalStorage 中？

【问题讨论】：

如果你能把它转换成字符串就好了。
我知道如何存储以及如何从我要求您的本地存储中检索它
@OmkarJadhav 你能解决这个问题吗？
不...我使用另一种方式来存储文件，但不是在本地存储中，我使用服务将该图像存储在多部分文件中。@lads

标签： javascript angular local-storage

【解决方案1】：

将文件转换为某种字符串编码（Base 64）并将其保存为字符串。

https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding

【讨论】：

Angular 2 中的任何想法
你不需要 Angular2。您可以像这样使用常规的 JavaScript FileReader 类：var reader = new FileReader(); reader.readAsDataURL(YOUR_FILE_HERE); reader.onload = function () { // do something with reader.result }
现在您可以将 reader.result（它是一个字符串）保存到本地存储。要从 localstorage 中读取并将其转换回文件，您可以反向使用相同的逻辑。
reader.result 给了我 base 64 格式然后我们如何将其转换为普通图像/文件
@OmkarJadhav 我刚刚发布的答案也涵盖了这一点。您可以从那里查看演示代码以获取更多详细信息。

【解决方案2】：

这是一个适用于 Angular 6/7/8 的独立服务。
它在本地存储中下载、存储和检索文件。

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { map, flatMap } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class OcFileStorageService {

  //#region Lifecycle methods

  constructor(private httpSvc: HttpClient) { }

  //#endregion Lifecycle methods

  //#region Exposed methods

  /**
   * Tries to retrieve base64 file from local storage.
   * If doesn't exist, downloads stores and retrieves the file again.
   * @param key Key to search in storage
   * @param urlIfNotExist Url which will be downloaded if key wasn't found
   * @returns Observable of base64 data url string with the file inside
   */
  public getStoredFile(key: string, urlIfNotExist: string): Observable<string> {
    const storedFile = this.getFromStorage(key);
    if (storedFile) {
      return this.objectToObserver<string>(storedFile);
    } else {
      return this.downloadDataAsBase64(urlIfNotExist).pipe(
        map((b64Result: string) => {
          this.saveToStorage(key, b64Result);
          return b64Result;
        })
      );
    }
  }

  //#region Exposed methods

  //#region Storage methods

  private saveToStorage(key: string, b64Result: string) {
    localStorage.setItem(key, b64Result);
  }

  private getFromStorage(key: string) {
    return localStorage.getItem(key);
  }

  //#endregion Storage methods

  //#region Downloader methods

  private downloadAsBlob(url: string) {
    return this.httpSvc.get(url, { responseType: 'blob' });
  }

  private downloadDataAsBase64(url: string): Observable<string> {
    return this.downloadAsBlob(url).pipe(
      flatMap(blob => {
        return this.blobToBase64(blob).pipe(
          map((b64Result: string) => {
            return b64Result;
          })
        );
      })
    );
  }

  //#endregion Downloader methods

  //#region Util methods

  private blobToBase64(blob: Blob): Observable<{}> {
    const fileReader = new FileReader();
    const observable = new Observable(observer => {
      fileReader.onloadend = () => {
        observer.next(fileReader.result);
        observer.complete();
      };
    });
    fileReader.readAsDataURL(blob);
    return observable;
  }

  private objectToObserver<T>(storedFile: T): Observable<T> {
    return new Observable<T>(observer => {
      observer.next(storedFile);
      observer.complete();
    });
  }

  //#region Util methods

}

用法很简单：

constructor(private ocFileStorageSvc: OcFileStorageService) {}

ngOnInit() {
  this.ocFileStorageSvc
    .getStoredFile('quokka', 'https://pbs.twimg.com/media/DR15b9eWAAEn7eo.jpg')
    .subscribe((base64Data: string) => {
      this.quokkaImageData = base64Data;
    });
}

here 是一个演示，以备不时之需。

【讨论】：