这次要讲的功能主要依赖于两个插件：
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 | √ | √ |
虽然支持的都挺多，不过既然是 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 中官方地址
想去里面看 issue 查问题的需要注意一下，File Transfer 的 issue 已经关了，让去另一个网站提问。README.md 原话
Report issues with this plugin on the使用方法
准备工作
上面两个安装好后。还需要使用安装另一个 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('打开失败'); }); **重点：
这里的第二个参数不是文件类型，而是 **这个插件在 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 都能搞定。