在Ionic

Question

我是Ionic的新手，我正在尝试创建一个能够从我的Android设备中下载图像的功能。当用户按下storage.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="https://cdn.houseplans.com/product/o2d2ui14afb1sov3cnslpummre/w1024.jpg?v=15" alt="Cute Pug">
      <button ion-button (click)="downloadImage('w1024.jpg')" color="secondary">Download File</button>
      <button ion-button (click)="retrieveImage('pug.jpg')" color="secondary">Retrieve downloaded image</button>
    </ion-card-content>
  </ion-card>
</ion-content>

该函数是我的storage.ts中的downloadImage（image），源代码如下：

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: 'storage-home',
  templateUrl: 'storage.html',
  providers: [Transfer, TransferObject, File]
})

export class StoragePage {

  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}https://cdn.houseplans.com/product/o2d2ui14afb1sov3cnslpummre/w1024.jpg?v=15${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();

      });
  }

已导入所有必需的插件，我创建了一个apk。文件将其安装在我的Android设备中。应用程序运行顺利，问题是当我单击下载按钮时，似乎无法正常工作，从而导致图像未成功下载的错误。

任何人都可以帮我编辑我的代码，以便工作正常，我在最近几天工作，我很困惑

谢谢你

Answer 1

这一行 const imageLocation ='${cordova.file.applicationDirectory}https://cdn.houseplans.com/product/o2d2ui14afb1sov3cnslpummre/w1024.jpg?v=15${image}';

为什么要将应用程序网址添加到您的链接中？正如您稍后将其作为url param传递给文件传输我建议它应该只是： 'https://cdn.houseplans.com/product/o2d2ui14afb1sov3cnslpummre/w1024.jpg?v=15${image}';

（请注意我用单引号替换模板引号以避免与stackoverflow代码引号冲突，如果复制粘贴请确保替换它们）