cordova - Ionic V4(beta 11)文件插件似乎不适用于 V4
问题描述
我正在尝试通过 ionic V4 将图片从互联网下载到手机,然后使用 File 插件将下载的图片直接从本机文件系统显示到标签。
不幸的是,我无法让它在 V4 中工作......但它在 V3 中工作。我认为 V4 解释路径以将其绑定到 src 属性的方式可能存在问题(?)
我写了一个程序来测试它。
TS 文件:
import { Component, OnInit } from '@angular/core';
import { FileTransfer, FileTransferObject } from '@ionic-native/file-transfer/ngx';
import { File } from '@ionic-native/file/ngx'
@Component({
selector: 'app-scratch2',
templateUrl: './scratch2.page.html',
styleUrls: ['./scratch2.page.scss'],
})
export class Scratch2Page implements OnInit {
private address: string = null;
private path: string = null;
private fileNumber = 1;
private latest = null;
private toggle = false;
constructor(
private fileX: FileTransfer,
private file: File
) {
this.path = this.file.dataDirectory + "files/";
}
ngOnInit() {
let filename = this.nameFile()
this.latest = this.nameFix(filename)
console.log("1the filename that is returned is ********** ", filename)
}
nameFile(){
let filename = this.path + "file" + this.fileNumber
return filename
}
nameFix(filename){
return filename.replace(/file:\/\//g, "")
}
downloadFile() {
let filename = this.nameFile();
console.log("2the filename that is returned is ********** ", filename)
console.log("Entered download File with url: ", this.address)
let url = this.address
const fileTransfer: FileTransferObject = this.fileX.create();
fileTransfer.download(url, filename).then((entry) => {
console.log('fileTransfer.download data ** ** ** **:' + JSON.stringify(entry));
this.fileNumber += 1;
this.latest = this.nameFix(filename)
}, (err) => {
// handle error
console.log("downloadfile() error: " + JSON.stringify(err));
});
}
toggleToggle(){
this.toggle = !this.toggle;
}
}
这是 HTML 文件:
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button defaultHref="/"></ion-back-button>
</ion-buttons>
<ion-title>scratch2</ion-title>
</ion-toolbar>
<ion-toolbar>{{latest}} {{toggle}}</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-item>
<ion-label>Address</ion-label>
<ion-input placeholder="Enter address" [(ngModel)]="address"></ion-input>
</ion-item>
<ion-button (click)="downloadFile()"> Download from address</ion-button>
<ion-button (click)="toggleToggle()">Toggle</ion-button>
<img *ngIf="toggle" [src]="latest"/>
</ion-content>
任何帮助,将不胜感激
解决方案
在这里回答我自己的问题……这就是我发现的。
文件结构确实发生了变化,文件本身可以通过网络服务器而不是直接访问。这是在这个链接上讨论的:https ://ionicframework.com/docs/wkwebview/
归结为:当您想将文件下载到手机时,您使用以下两个路径进行操作,一个用于下载文件,另一个用于显示下载的文件:
this.downloadPath = this.file.dataDirectory + "filename.jpg"
this.showFilePath = normalizeURL(this.file.dataDirectory + "filename.jpg")
其中 normalizeURL 是通过以下方式导入的: import { normalizeURL } from “ionic-angular”;
所以,我重写了上面的代码,看起来像这样:
文件
import { Component, OnInit } from '@angular/core';
import { FileTransfer, FileTransferObject } from '@ionic-native/file-transfer/ngx';
import { File } from '@ionic-native/file/ngx'
import { normalizeURL } from "ionic-angular";
@Component({
selector: 'app-scratch2',
templateUrl: './scratch2.page.html',
styleUrls: ['./scratch2.page.scss'],
})
export class Scratch2Page implements OnInit {
private address: string = null;
private path: string = null;
private toggle = false;
private showPath = null;
private downloadPath = null
constructor(
private fileX: FileTransfer,
private file: File
) {
this.path = this.file.dataDirectory + "files/";
this.downloadPath = this.path + "beer.jpg"
this.showPath = normalizeURL(this.path + "beer.jpg")
}
ngOnInit() {
}
downloadFile() {
console.log("Entered download File with url: ", this.address)
let url = this.address
const fileTransfer: FileTransferObject = this.fileX.create();
fileTransfer.download(url, this.downloadPath).then((entry) => {
console.log('fileTransfer.download data ** ** ** **:' + JSON.stringify(entry));
}, (err) => {
console.log("downloadfile() error: " + JSON.stringify(err));
});
}
toggleToggle() {
this.toggle = !this.toggle;
}
}
文件
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button defaultHref="/"></ion-back-button>
</ion-buttons>
<ion-title>scratch2</ion-title>
</ion-toolbar>
<ion-toolbar>toggle:{{toggle}} <br><br> download path:<br>{{downloadPath}} <br><br> Show path:<br>{{showPath}}</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-item>
<ion-label>http address of jpg:</ion-label>
<ion-input placeholder="Enter address" [(ngModel)]="address"></ion-input>
</ion-item>
<ion-button (click)="downloadFile()"> download jpg</ion-button>
<ion-button (click)="toggleToggle()">Toggle</ion-button>
<img *ngIf="toggle" src="{{showPath}}" />
</ion-content>
在 iPhone 模拟器上,下载路径是这样开始的:
file:///Users/myUserName/Library/etc etc etc
显示文件路径如下所示:
http://localhost:8080/_file_/Users/myUserName/Library/etc etc etc