这次要讲的功能主要依赖于两个插件：
File Transfer 和 File Opener
插件介绍
主要功能
File Transfer
功能：文件上传、文件下载File Opener
功能：文件预览
支持的平台
| 平台名 | File Transfer | File Opener |
|---|---|---|
| Amazon Fire OS | √ | × |
| Android | √ | √ |
| Browser | √ | × |
| iOS | √ | √ |
| Ubuntu | √ | × |
| Windows | √ | √ |
| Windows Phone 7 | √ | × |
| Windows Phone 8 | √ | √ |
注：安卓最低支持到 4.4.4 版本
虽然支持的都挺多，不过既然是 ionic 项目，一会我们主要讨论 iOS 和 Android
安装方式
只作为 cordova 插件：
// File Transfer
$ cordova plugin add cordova-plugin-file-transfer
// File Opener
$ cordova plugin add cordova-plugin-file-opener2
ionic 中使用：
// File Transfer
$ ionic cordova plugin add cordova-plugin-file-transfer
$ npm install --save @ionic-native/file-transfer
// File Opener
$ ionic cordova plugin add cordova-plugin-file-opener2
$ npm install --save @ionic-native/file-opener
为什么在 ionic 中安装有区别呢？
第一行：ionic 把 cli 从 cordova 改成了 ionic cordova
第二行：使用 npm 这个命令把包名保存在 package.json 中
官方地址
- File Transfer
- File Opener
想去里面看 issue 查问题的需要注意一下，File Transfer 的 issue 已经关了，让去另一个网站提问。README.md 原话
Report issues with this plugin on the Apache Cordova issue tracker
使用方法
准备工作
上面两个安装好后。还需要使用安装另一个 File 插件，因为只用到了一句话，所以上面没把他列出来
$ ionic cordova plugin add cordova-plugin-file
$ npm install --save @ionic-native/file
都安装好后，把他们添加到 app.module.ts 的 providers
File Transfer 通用部分
import { FileTransfer, FileTransferObject, FileUploadOptions } from '@ionic-native/file-transfer';
import { File } from '@ionic-native/file';
constructor(
...
private transfer: FileTransfer,
private file: File,
...) {...}
File Transfer 上传文件
upload() {
// ionic 官方文档例子漏写了这句话
// http://ionicframework.com/docs/native/file-transfer/
//
const fileTransfer: FileTransferObject = this.transfer.create();
// 更多的 Options 可以点进去自己看看，不懂的就谷歌翻译他的注释
let options: FileUploadOptions = {
fileKey: 'file',
fileName: 'name.jpg', // 文件类型
headers: {},
params: {} // 如果要传参数，写这里
.....
}
fileTransfer.upload('', '', options)
.then((data) => {
// success
}, (err) => {
// error
})
}
File Transfer 下载文件
先放出 ionic 官方文档例子。
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
});
这个 pdf 不知道为啥我一直下载失败，我去别的网站随便找个 pdf 或者项目上的文件下载一直成功，大家可以自己试试。
File Transfer 下载文件保存路径问题
这个保存路径，经过我测试 iOS 保存成功，安卓有的手机成功有的失败。检查了一下 AndroidManifest.xml 里的权限，权限代码也自动添加了
安卓 7.0 保存成功，4.4.4 和 5.3.3 都失败了。因为 Android 从 6.0 运行时的权限修改了，我不知道和这个有没有关系。暂时用了一个方法解决了问题，因为测试机有限，测的可能也不太完整，有问题请指出。
我判断了一下，如果是 iOS 或者 Android 6 及以上的版本，则保存路径使用
this.file.dataDirectory + 'file.pdf'
否则使用
'file:///storage/sdcard0/Download/' + 'file.pdf'
File Transfer 显示进度
直接复制这段代码。我做的项目，在下载的时候用了，感觉上传应该也能用。
// 进度
fileTransfer.onProgress(progressEvent => {
if (progressEvent.lengthComputable) {
// 下载过程会一直打印，完成的时候会显示 1
console.log(progressEvent.loaded / progressEvent.total);
} else {
}
});
File Opener 预览文件（可配合文件下载使用）
import { FileOpener } from '@ionic-native/file-opener';
constructor(
...
private fileOpener: FileOpener,
...) {...}
在文件下载成功的地方插入以下代码
// entry.nativeURL 是上面那个插件文件下载后的保存路径
this.fileOpener.open(entry.nativeURL, this.getFileMimeType(fileType))
.then(() => {
console.log('打开成功');
})
.catch(() => {
console.log('打开失败');
});
重点：
这里的第二个参数不是文件类型，而是 MIMEType
这个插件在 iOS 上好像不需要提供 MIME，我传错了也能预览，安卓是全军覆没了。这里提供一个代码里用到的取得 MIME 的方法
getFileMimeType(fileType: string): string {
let mimeType: string = '';
switch (fileType) {
case 'txt':
mimeType = 'text/plain';
break;
case 'docx':
mimeType = 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
break;
case 'doc':
mimeType = 'application/msword';
break;
case 'pptx':
mimeType = 'application/vnd.openxmlformats-officedocument.presentationml.presentation';
break;
case 'ppt':
mimeType = 'application/vnd.ms-powerpoint';
break;
case 'xlsx':
mimeType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
break;
case 'xls':
mimeType = 'application/vnd.ms-excel';
break;
case 'zip':
mimeType = 'application/x-zip-compressed';
break;
case 'rar':
mimeType = 'application/octet-stream';
break;
case 'pdf':
mimeType = 'application/pdf';
break;
case 'jpg':
mimeType = 'image/jpeg';
break;
case 'png':
mimeType = 'image/png';
break;
default:
mimeType = 'application/' + fileType;
break;
}
return mimeType;
}
获取文件类型的方法也给一个
// 刚开始造轮子的时候写的是 indexOf
// 后来果然出问题了，还是得判断最后一个 .
getFileType(fileName: string): string {
return fileName.substring(fileName.lastIndexOf('.') + 1, fileName.length).toLowerCase();
}
文件预览的效果，在 iOS 上是直接调用了预览功能。安卓上是弹框选择打开软件，基本上 WPS Office 都能搞定。