离子文件下载不起作用 [英] Ionic file download not working

问题描述

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

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

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

这是 home.ts 代码

从'@angular/core'导入{组件}；从 'ionic-angular' 导入 {NavController，Platform，AlertController}；从'@ionic-native/transfer'导入{Transfer, TransferObject}；从'@ionic-native/file'导入{文件}；声明 var cordova: any;@零件({选择器:'page-home'，templateUrl: 'home.html',提供者:[传输、传输对象、文件]})导出类主页 {存储目录:字符串=''；构造函数(公共navCtrl:NavController，公共平台:平台，私有传输:传输，私有文件:文件，公共alertCtrl:AlertController){this.platform.ready().then(() => {//确保这是在设备上，而不是仿真(例如 chrome 工具设备模式)if(!this.platform.is('cordova')) {返回假；}if (this.platform.is('ios')) {this.storageDirectory = cordova.file.documentsDirectory;}否则如果(this.platform.is('android')){this.storageDirectory = cordova.file.dataDirectory;}别的 {//否则退出，但您可以在此处添加更多类型，例如视窗返回假；}});}下载图片(图片){this.platform.ready().then(() => {常量文件传输:TransferObject = this.transfer.create();常量 imageLocation = `${cordova.file.applicationDirectory}www/assets/img/${image}`;fileTransfer.download(imageLocation, this.storageDirectory + image).then((entry) => {常量 alertSuccess = this.alertCtrl.create({标题:`下载成功！`,subTitle: `${image} 已成功下载到:${entry.toURL()}`,按钮:['确定']});alertSuccess.present();}，(错误)=>{常量 alertFailure = this.alertCtrl.create({title: `下载失败！`,subTitle: `${image} 没有成功下载.错误代码:${error.code}`，按钮:['确定']});alertFailure.present();});});}检索图像(图像){this.file.checkFile(this.storageDirectory, image).then(() => {常量 alertSuccess = this.alertCtrl.create({title: `文件检索成功！`,subTitle:`${image} 已成功检索自:${this.storageDirectory}`，按钮:['确定']});返回 alertSuccess.present();}).catch((错误) => {常量 alertFailure = this.alertCtrl.create({title: `文件检索失败！`,subTitle: `${image} 未成功检索.错误代码:${err.code}`,按钮:['确定']});返回 alertFailure.present();});}}

这是 home.html 代码

<ion-header><离子导航栏><离子标题>文件传输示例</离子标题></离子导航栏></离子头><离子含量填充><离子卡><离子卡头>Ionic 3 文件传输示例</离子卡头><离子卡内容><img src="assets/img/pug.jpg" alt="可爱的哈巴狗"><button ion-button(click)="downloadImage('pug.jpg')" color="secondary">下载图片</button><button ion-button (click)="retrieveImage('pug.jpg')" color="secondary">检索下载的图片</button></离子卡内容></离子卡></离子含量>

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

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

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

谢谢.

解决方案

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

使用文件传输插件无法下载.p>

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

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

如科尔多瓦文档中所述(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 会模拟它.

I am building an ionic app for wallpapers.

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.

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.

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

      });
  }

}

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>

I build this ionic app based on this Github code example

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?

Thanks.

解决方案

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

Download not working using filetransfer plugin.

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

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.

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/...".

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

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