Ionic 4：如何将设备上的图像保存为Firebase存储的离线模式

Question

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

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

如何使用ionic / Cordova提供的带有本机文件传输插件的图像从Firebase的图像URL下载图像

我已经阅读了文档，但这只是基本知识，不要花太多！

DOCS提供的代码：（我不了解file.pdf的下载方法！图像可以带有jpg / png ..etc等任何扩展名）

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

file.pdf下载方法不是问题，因为您可以从API响应中获取带有扩展名的完整文档/图像名称。

例如

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}}">

Answer 2

您可以在这里使用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 3

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

否则，请使用此plugin。

Answer 4

感谢您的回复，但我已经知道了！

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