离子文件下载不起作用

Question

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

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

当我点击下载按钮时，会显示一个对话框，上面写着“下载成功！Pug.jpg 已成功下载到：文件路径”。但是当我检查手机内存时，没有这样的文件。当我点击“检索”时按钮显示对话框“文件检索成功！Pug.jpg 已成功检索自：文件路径”“即使手机内存中不存在文件。

这是 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();

      });
  }

}

这是 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>

我基于这个Github code example构建了这个离子应用程序

我实际上希望离子应用程序首先在内部存储器中创建一个文件夹（应用程序命名文件夹）并将所有图像放在那里。这样用户就可以访问该文件夹中的文件。例如，如果应用程序名称是“Appsample”，那么所有图像应该在内存中的 Appsample 文件夹中。

我该如何为上述目的进行开发？

谢谢。

Answer 1

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

Download not working using filetransfer plugin.

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

 else if(this.platform.is('android')) {
        this.storageDirectory = cordova.file.dataDirectory;
 }

如 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 会模拟它。

Answer 2

我在编写下载代码时遇到了同样的问题，但我在手机上看不到文件

   1. Write download method
   2.  Write Permission method, Call Permission method
   3.  Call download method inside Permission, the phone will pop up and ask for permission for file read if it has not been set.
   4.  After download you might not be able to see where the file is on phone, you will now use photoViewer to view it on phone if it is 
image or use document viewer if it is pdf or other document related.

需要的插件

private transfer: FileTransfer,
private fileTransfer: FileTransferObject,
private file: File,
private androidPermissions: AndroidPermissions,
private photoViewer: PhotoViewer,

getPermission() {
    // get permission from device to save 
    this.androidPermissions.checkPermission(this.androidPermissions.PERMISSION.READ_EXTERNAL_STORAGE).then(
        result =>//,
            err => this.androidPermissions.requestPermission(this.androidPermissions.PERMISSION.READ_EXTERNAL_STORAGE)
    );

    // get permission from device to save 
    this.androidPermissions.hasPermission(this.androidPermissions.PERMISSION.WRITE_EXTERNAL_STORAGE)
        .then(status => {
            if (status.hasPermission) {
                this.download('k');
            }
            else {
                this.androidPermissions.requestPermission(this.androidPermissions.PERMISSION.WRITE_EXTERNAL_STORAGE)
                    .then(status => {
                        if (status.hasPermission) {
                            this.download('');
                        }
                    });
            }
        });
}
public download() {
    let url = encodeURI(this.imgUrl);
    var imagePath = this.file.dataDirectory + "myDP.png";
    const fileTransfer = this.transfer.create();
    fileTransfer.download(url, imagePath).then((entry) => {
        this.generalProvider.showToast('download completed: ' + imagePath);
        this.photoViewer.show(entry.toURL());
    }, (error) => {
    });
}