如何使用ionic在图库中显示下载的图像 [英] How to display the downloaded images in gallery with ionic

问题描述

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

I Try to make an image available in the gallery after downloading, I use MediaScannerPlugin , so the question is how I can access cordova's plugin ? this is my code:

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);
});

我得到的错误：

未捕获（在诺言中）：TypeError：无法读取未定义的属性'plugins'

Uncaught (in promise): TypeError: Cannot read property 'plugins' of undefined TypeError: Cannot read property 'plugins' of undefined

离子版本4.6.0

Cordova版本9.0.0

Ionic version 4.6.0
Cordova version 9.0.0

谢谢。

推荐答案

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中。

//now the file(img/video/..) is download in project(com.app)/file which temp folder i.e. this.file.externalDataDirectory where it takes. this folder will be deleted where you delete the app that why you have to move or copy the file.

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

其他如果要使用移动存储中的保存文件，则

https://stackoverflow.com/a/57494421/7456041

Additional If you want to use save file which is in mobile storage then
https://stackoverflow.com/a/57494421/7456041

这篇关于如何使用ionic在图库中显示下载的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！