如何使用离子在画廊中显示下载的图像答案

【问题标题】：How to display the downloaded images in gallery with ionic如何使用离子在画廊中显示下载的图像
【发布时间】：2019-12-12 18:19:15
【问题描述】：

我尝试在下载后在图库中提供图片，我使用MediaScannerPlugin ，所以问题是如何访问cordova 的插件？这是我的代码：

const fileTransfer: FileTransferObject = this.transfer.create();
let encoded_url = encodeURI(img_url);
fileTransfer.download(encoded_url, this.file.externalApplicationStorageDirectory+"download/"+img_id+".png", true).then((entry) => {
         // Download completed successfully
        let toast = this.toastCtrl.create({
          message: 'Image downloaded.',
          cssClass:'toastStyle',
          duration: 2000,
          position: 'bottom'
        });
        toast.present();
        // var cordova:any; with this line I got no errors but the downloaded image aren't available in the gallery
        cordova.plugins.MediaScannerPlugin.scanFile( this.file.externalApplicationStorageDirectory+"download/"+img_id+".png");

}, (error) => {
          // error was happened
          console.log("download error source "+  error.source);
          console.log("download error target " + error.target);
          console.log("upload error code" + error.code);
});

我得到的错误：

未捕获（承诺中）：类型错误：无法读取未定义的属性“插件”类型错误：无法读取未定义的属性“插件”

离子版本 4.6.0
Cordova 版本 9.0.0

谢谢。

【问题讨论】：

标签： android node.js typescript cordova ionic-framework

【解决方案1】：

downloadViaURL(url){
    let url = "https://download.com/file.whatever";
    let path = this.file.externalDataDirectory + url.substring(url.lastIndexOf('/') + 1);

    this.file.checkFile(this.file.externalDataDirectory,url.substring(url.lastIndexOf('/') + 1)).then(value => {
      console.log('is already downloaded');
    },reason => {

      console.log('reason : ',JSON.stringify(reason))
      this.fileTransferObject = this.fileTransfer.create();

      this.fileTransferObject.download(url,path,true).then(value => {

        console.log('download : ',JSON.stringify(value));
        this.moveToGallery(value)


      },rejected=>{
        console.log('download rejected : ',JSON.stringify(rejected));
//incomplete file download
        this.file.removeFile(this.file.externalDataDirectory,url.substring(url.lastIndexOf('/') + 1)).then(value => {
          console.log('removeFile : ',JSON.stringify(value))
        },reason =>{
          console.log('removeFile reason : ',JSON.stringify(reason))

        }).catch(error=>{
          console.log('removeFile error : ',JSON.stringify(error))
        })


      }).catch(err=>{
        console.log('download error : ',JSON.stringify(err));
      })

//现在文件(img/video/..) 下载到 project(com.app)/file 哪个临时文件夹，即 this.file.externalDataDirectory 所在的位置。此文件夹将在您删除应用程序的地方被删除，您必须移动或复制文件。

moveToGallery(value){
  this.file.moveFile(path, fileName, newPath, newFileName)
  //OR
  this.file.copyFile(path, fileName, newPath, newFileName)
}

如果您想使用移动存储中的保存文件，那么
https://stackoverflow.com/a/57494421/7456041

【讨论】：

你的意思是当我将图像复制/移动到this.file.externalDataDirectory 时，它将在我的画廊中可用？
没有。 this.file.externalDataDirectory 是应用程序的临时文件夹。您必须将图像移动或复制到您的图库路径，即新路径

【解决方案2】：

只需在页面顶部声明一个变量。在运行时，它会找到合适的插件并发送请求。您可以在下面找到简单的演示。

import { Injectable } from '@angular/core';
import {ToastController, LoadingController, Events, Toast, NavController, Platform} from 'ionic-angular';

declare var MediaScannerPlugin: any;

@Injectable()
export class YourClass {
     ...
     MediaScannerPlugin.scanFile( this.file.externalApplicationStorageDirectory+"download/"+img_id+".png");
     ...
}

【讨论】：