离子文件下载不起作用
我在为壁纸构建离子应用程序。离子文件下载不起作用
在应用程序中,显示存储在www/assets/img中的图像。我在下面创建了2个按钮,用于将显示的图像下载并检索到移动设备内存。
当我点击下载按钮时,会显示一个对话框,说“下载成功!Pug.jpg已成功下载到:filepath”。但是当我检查手机内存时,没有这样的文件存在。还有,当我点击“Retrieve “按钮,它显示的对话框说”文件检索成功Pug.jpg成功地从检索:。文件路径“”即使文件不存在在手机内存
这是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
其实我是想离子应用先在内部存储器中的文件夹(命名的文件夹的应用程序),并把there.So用户可以在该文件夹中访问文件的所有图像这种离子的应用程序。例如,如果应用程序名称是“Appsample”,则所有图像应位于内部存储器中的Appsample文件夹中。
我该如何发展以上目的?
谢谢。
我刚刚张贴的答案,几乎同样的问题,请参见:
Download not working using filetransfer plugin。
这里的主要问题是,您使用以下目录保存文件:
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会模拟它。
我已经得到了答案。无论如何,谢谢。 – codewiz
图片下载显示成功,但在iPhone上不可见。如何解决 –