ionic3 文件上傳下載和預覽

此次要講的功能主要依賴於兩個插件：
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 中

官方地址

• 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('<file path>', '<api endpoint>', 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 裏的權限，權限代碼也自動添加了

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

安卓 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 都能搞定。