离子文件下载不起作用

Question

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

在应用程序中，有一个图像存储在 www/assets/img displayed.I 下面有 build 2 按钮，用于下载和检索显示的图像到移动设备内存。

当我点击下载按钮时，会显示一个对话框，显示 "Download Succeeded!Pug.jpg was successfully downloaded to: filepath"。但是当我检查 phone 内存时，没有这样的文件 there.Also 当我点击 "Retrieve"按钮它显示对话框说"File retrieval succeed!Pug.jpg was successfully retrieved from: filepath"“即使文件不存在于phone内存中。

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

构建了这个 ionic 应用程序

我实际上希望 ionic 应用程序首先在内部存储器中创建一个文件夹（名为应用程序的文件夹）并放置所有图像 there.So 用户可以访问该 folder.For 示例中的文件，如果应用程序名称是"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

我在编写下载代码时遇到了同样的问题，但我在 phone

上看不到该文件

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

离子文件下载不起作用

Ionic file download not working

android

ios

cordova-plugins

ionic-native

ionic3