离子文件下载无法正常工作 [英] Ionic file download not working

问题描述

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

I am building an ionic app for wallpapers.

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

In the app,there is an image stored in www/assets/img displayed.I have build 2 buttons below,for downloading and retrieving the displayed image to the mobile device memory.

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

When i click download button,a dialog is shown,saying "Download Succeeded!Pug.jpg was successfully downloaded to: filepath".But when i check the phone memory no such file is there.Also when i click "Retrieve"Button it's showing dialog saying"File retrieval succeed!Pug.jpg was successfully retrieved from: filepath""even though file is not present in the phone memory.

这是home.ts代码

This is home.ts code

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代码

This is home.html code

<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代码示例

我实际上希望离子应用程序首先创建内部存储器中的文件夹（应用程序名为文件夹）并将所有图像放在那里。因此，用户可以访问该文件夹中的文件。例如，如果应用程序名称为Appsample，则所有图像都应位于内部存储器中的Appsample文件夹中。

I actually want the ionic app to first create a folder(app named folder) in internal memory and put all images there.So users can access files in that folder.For example,if app name is "Appsample" then all images should be in Appsample folder in internal memory.

我如何为上述目的而开发？

How can i develop for above purpose?

谢谢。

推荐答案

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

I just posted an answer to nearly the same question, see:

使用filetransfer插件下载无法使用。

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

The main problem here is that you are using the following directory to save your file:

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

如cordova文档中所述（ https://cordova.apache.org/docs/en/最新/ reference / cordova-plugin-file /＃where-to-store-files ），cordova.file.dataDirectory是使用内部存储器的应用程序沙箱中的持久和私有数据存储。

As stated in the cordova docs (https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-file/#where-to-store-files), "cordova.file.dataDirectory" is the persistent and private data storage within the application's sandbox using internal memory.

使用 cordova.file.externalDataDirectory 以符合您的目的。然后该文件应该放在这里：file：/// storage / emulated / 0 / Android / data / subdomain.domainname.toplevdomain / files / ...。

Use cordova.file.externalDataDirectory to fit your purpose. Then the file should be placed somewhere here: "file:///storage/emulated/0/Android/data/subdomain.domainname.toplevdomain/files/...".

在Android上，外部存储目录始终存在。如果设备没有物理卡，Android会模拟它。

On Android, external storage directories always exist. If the device doesn't have a physical card, Android will emulate it.

这篇关于离子文件下载无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！