Ionic文件下载不起作用

Question

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

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

当我点击下载按钮时，会显示一个对话框，上面写着"下载成功！Pug.jpg已成功下载到：filepath"。但当我检查手机内存时，没有这样的文件。此外，当我点击"检索"按钮时，它会显示对话框，上面写着"文件检索成功！Pug.jpg已从：filepath成功检索"，即使文件不在手机内存中。

这是家。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代码示例构建了这个ionic应用程序

实际上，我希望ionic应用程序首先在内部内存中创建一个文件夹(应用程序名为文件夹)，并将所有图像放在那里。这样用户就可以访问该文件夹中的文件。例如，如果应用程序名称为"Appsample"，则所有图像都应位于内部内存中的Appsample文件夹中。

我怎样才能达到上述目的？

谢谢。

Answer 1

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

使用文件传输插件下载不起作用。

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

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

正如cordova文档中所述(https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-file/#where-存储文件)，"cordova.file.dataDirectory"是使用内部内存在应用程序沙盒中的持久和私有数据存储。

使用cordova.file.externalDataDirectory来满足您的目的。然后应该将文件放在此处的某个位置："file:///storage/emulated/0/Android/data/subdomain.domainname.toplevdomain/files/...".

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

Answer 2

您可以使用这种方式，它是工作文件

电容

1. npm install cordova-plugin-whitelist
2. npx cap sync

Cordova

1. npm install cordova-plugin-whitelist
2. npx cap update

download() {
const url = 'http://www.example.com/file.pdf';
fileTransfer.download(url, this.file.dataDirectory + 'file.pdf').then((entry) => {
console.log('download complete: ' + entry.toURL());
}, (error) => {
// handle error
});
}

Answer 3

我在写下载代码时遇到了同样的问题，它起作用了，但我在手机上看不到文件

1. Write download method
2.  Write Permission method, Call Permission method
3.  Call download method inside Permission, the phone will pop up and ask for permission for file read if it has not been set.
4.  After download you might not be able to see where the file is on phone, you will now use photoViewer to view it on phone if it is 
image or use document viewer if it is pdf or other document related.

插件需要

private transfer: FileTransfer,
private fileTransfer: FileTransferObject,
private file: File,
private androidPermissions: AndroidPermissions,
private photoViewer: PhotoViewer,
getPermission() {
// get permission from device to save 
this.androidPermissions.checkPermission(this.androidPermissions.PERMISSION.READ_EXTERNAL_STORAGE).then(
result =>//,
err => this.androidPermissions.requestPermission(this.androidPermissions.PERMISSION.READ_EXTERNAL_STORAGE)
);
// get permission from device to save 
this.androidPermissions.hasPermission(this.androidPermissions.PERMISSION.WRITE_EXTERNAL_STORAGE)
.then(status => {
if (status.hasPermission) {
this.download('k');
}
else {
this.androidPermissions.requestPermission(this.androidPermissions.PERMISSION.WRITE_EXTERNAL_STORAGE)
.then(status => {
if (status.hasPermission) {
this.download('');
}
});
}
});
}
public download() {
let url = encodeURI(this.imgUrl);
var imagePath = this.file.dataDirectory + "myDP.png";
const fileTransfer = this.transfer.create();
fileTransfer.download(url, imagePath).then((entry) => {
this.generalProvider.showToast('download completed: ' + imagePath);
this.photoViewer.show(entry.toURL());
}, (error) => {
});
}