离子文件下载无法正常工作

cod*_*wiz 1 android ios cordova-plugins ionic-native ionic3

我正在为壁纸构建一个离子应用程序.

在应用程序中,存在显示在www/assets/img中的图像.我在下面构建了2个按钮,用于下载和检索显示的图像到移动设备存储器.

当我点击下载按钮时,会出现一个对话框,说"下载成功!Pug.jpg已成功下载到:filepath".但是当我检查手机内存时没有这样的文件.当我点击"检索"按钮时它会显示对话框说"文件检索成功!Pug.jpg已成功检索:filepath""即使手机内存中没有文件.

这是home.ts代码

import {Component} from '@angular/core';
import {NavController, Platform, AlertController} from 'ionic-angular';
import {Transfer, TransferObject} from '@ionic-native/transfer';
import {File} from '@ionic-native/file';

declare var cordova: any;

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  providers: [Transfer, TransferObject, File]
})

export class HomePage {

  storageDirectory: string = '';

  constructor(public navCtrl: NavController, public platform: Platform, private transfer: Transfer, private file: File, public alertCtrl: AlertController) {
    this.platform.ready().then(() => {
      // make sure this is on a device, not an emulation (e.g. chrome tools device mode)
      if(!this.platform.is('cordova')) {
        return false;
      }

      if (this.platform.is('ios')) {
        this.storageDirectory = cordova.file.documentsDirectory;
      }
      else if(this.platform.is('android')) {
        this.storageDirectory = cordova.file.dataDirectory;
      }
      else {
        // exit otherwise, but you could add further types here e.g. Windows
        return false;
      }
    });
  }

  downloadImage(image) {

    this.platform.ready().then(() => {

      const fileTransfer: TransferObject = this.transfer.create();

      const imageLocation = `${cordova.file.applicationDirectory}www/assets/img/${image}`;

      fileTransfer.download(imageLocation, this.storageDirectory + image).then((entry) => {

        const alertSuccess = this.alertCtrl.create({
          title: `Download Succeeded!`,
          subTitle: `${image} was successfully downloaded to: ${entry.toURL()}`,
          buttons: ['Ok']
        });

        alertSuccess.present();

      }, (error) => {

        const alertFailure = this.alertCtrl.create({
          title: `Download Failed!`,
          subTitle: `${image} was not successfully downloaded. Error code: ${error.code}`,
          buttons: ['Ok']
        });

        alertFailure.present();

      });

    });

  }

  retrieveImage(image) {

    this.file.checkFile(this.storageDirectory, image)
      .then(() => {

        const alertSuccess = this.alertCtrl.create({
          title: `File retrieval Succeeded!`,
          subTitle: `${image} was successfully retrieved from: ${this.storageDirectory}`,
          buttons: ['Ok']
        });

        return alertSuccess.present();

      })
      .catch((err) => {

        const alertFailure = this.alertCtrl.create({
          title: `File retrieval Failed!`,
          subTitle: `${image} was not successfully retrieved. Error Code: ${err.code}`,
          buttons: ['Ok']
        });

        return alertFailure.present();

      });
  }

}
Run Code Online (Sandbox Code Playgroud)

这是home.html代码

<ion-header>
  <ion-navbar>
    <ion-title>
      File Transfer Example
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-card>
    <ion-card-header>
      Ionic 3 File Transfer Example
    </ion-card-header>
    <ion-card-content>
      <img src="assets/img/pug.jpg" alt="Cute Pug">
      <button ion-button (click)="downloadImage('pug.jpg')" color="secondary">Download image</button>
      <button ion-button (click)="retrieveImage('pug.jpg')" color="secondary">Retrieve downloaded image</button>
    </ion-card-content>
  </ion-card>
</ion-content>
Run Code Online (Sandbox Code Playgroud)

我基于这个Github代码示例构建了这个离子应用程序

我实际上希望离子应用程序首先在内部存储器中创建一个文件夹(应用程序名为文件夹)并将所有图像放在那里.所以用户可以访问该文件夹中的文件.例如,如果应用程序名称是"Appsample",那么所有图像都应该在内部存储器中的Appsample文件夹.

我如何为上述目的而发展?

谢谢.

Jud*_*dge 6

我刚刚发布了几乎相同问题的答案,请参阅:

使用filetransfer插件下载无法正常工作.

这里的主要问题是您使用以下目录来保存文件:

 else if(this.platform.is('android')) {
        this.storageDirectory = cordova.file.dataDirectory;
 }
Run Code Online (Sandbox Code Playgroud)

如cordova文档(https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-file/#where-to-store-files)中所述,"cordova.file.dataDirectory"是使用内部存储器在应用程序的沙箱中进行持久和私有数据存储.

使用cordova.file.externalDataDirectory适合你的目的.然后该文件应该放在这里:"file:/// storage/emulated/0/Android/data/subdomain.domainname.toplevdomain/files/...".

在Android上,外部存储目录始终存在.如果设备没有物理卡,Android将模拟它.

  • 图像下载显示成功但在 iphone 上不可见。如何解决 (2认同)