Ionic 4：如何在设备上保存来自 firebase 存储的离线模式图像

Question

我使用 SQLite 原生插件 来存储文本内容，但我也需要对图像进行存储！（对于离线模式）

使用 angular/ionic 4 无法将图像转换为 base64 字符串，所以我的问题是：

如何使用 ionic/Cordova 提供的本机文件传输插件从来自 Firebase

的图像 url 下载图像

我已经阅读了文档，但它是基础的，不要给出太多！

DOCS 提供的代码：（我不明白file.pdf 下载方法！图片可以带有任何扩展名，例如 jpg/png ..等 )

download() {
  const url = 'http://www.example.com/file.pdf';
  fileTransfer.download(url, this.file.dataDirectory + 'file.pdf').then((entry) => {
    console.log('download complete: ' + entry.toURL());
  }, (error) => {
    // handle error
  });
}

Answer 1

您可以使用 LocalStorage，更多信息在这里：https://ionicframework.com/docs/building/storage

一个我几周前用来存储图片的例子。

 if (this.platform.is('ios')) {
      this.fileName = 'Image';
       this.filePath = this.file.documentsDirectory.replace(/file:\/\//g, '') + this.fileName;

    } else if (this.platform.is('android')) {
      this.fileName = 'Image';
        this.filePath = this.file.externalDataDirectory.replace(/file:\/\//g, '') + this.fileName;

Answer 2

Firebase 具有很酷的 offline 功能。尝试查询必要的数据，并使用它。

否则使用这个plugin。

Answer 3

感谢您的回复，但我已经弄明白了！

我已将我的图像存储在 phone 上，然后使用 Cordova 插件将其转换为 base64 图像，您可以找到 here 然后我将 base64 图像与文本一起添加到我的存储中内容.

Answer 4

file.pdf 下载方法不是问题，因为您可以从 API 响应中获得带扩展名的完整 document/image 名称。

例如

for (let i = 0; i < res.data.length; i++) { 
     let fileName = res.data[i].name;
     let url = 'http://www.example.com/' + res.data[i].name;
     const _fileTransfer: FileTransferObject = this._fileTransfer.create();
     _fileTransfer.download(url, this._file.dataDirectory + fileName).then((entry) => {
         console.log('download complete: ' + entry.toURL());
     }, (error) => {
         console.log(error);
     });
}

然后您可以使用 normalizeURL 显示图像，给定一个表示 URL、returns the URL path after stripping the trailing slashes.

的字符串

import { normalizeURL } from 'ionic-angular';

{'filePath': normalizeURL(result[i].fileName)

<img src="{{filePath}}">

Ionic 4：如何在设备上保存来自 firebase 存储的离线模式图像

Ionic 4: How to save images on device for offline mode that comes from firebase storage

javascript

firebase

ionic-framework

angular

ionic4

如何使用 ionic/Cordova 提供的本机文件传输插件从来自 Firebase