【发布时间】：2018-01-31 23:33:06
【问题描述】：
我对 Ionic 很陌生，我正在尝试创建一个能够从 url 下载我的 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 设备中。该应用程序运行顺利，问题是当我单击下载按钮时似乎无法正常工作，给我错误的是图像未成功下载。
谁能帮我编辑我的代码以正常工作，我最近几天都在努力，我很困惑
感谢您的问候
【问题讨论】：
标签： cordova ionic-framework file-transfer