關(guān)于ionic3多文件上傳，網(wǎng)上資料非常少，特別是基于form方式的掌栅，有也大多因?yàn)榇a過(guò)期而失效猾封，因?yàn)橛腥藛?wèn)到，所以寫(xiě)一下痢站。
因?yàn)閷?xiě)blog的網(wǎng)絡(luò)環(huán)境打不開(kāi)ionic的官網(wǎng)阵难，所以鏈接都是指向github
文件上傳多望，我們一般需要和本地文件打交道怀偷，先安裝file插件（全稱cordova-plugin-file）,
執(zhí)行以下命令安裝file插件及其對(duì)應(yīng)的ionic-native模塊：
ionic cordova plugin add cordova-plugin-file
npm install @ionic-native/file --save
用時(shí)ts頭部先導(dǎo)入：
import { File } from '@ionic-native/file';
接著構(gòu)造函數(shù)注入File
constructor(private file:File){}
然后可以用兩種方式實(shí)現(xiàn)：
fileTransfer插件? ? ? vs? ? ? form上傳
1椎工、fileTransfer
先執(zhí)行以下命令安裝fileTransfer插件（全稱cordova-plugin-file-transfer）及其對(duì)應(yīng)的ionic-native模塊：
ionic cordova plugin add cordova-plugin-file-transfer
npm install @ionic-native/transfer --save
其中维蒙，fileTransfer提供三個(gè)方法：
upload: Sends a file to a server.
download: Downloads a file from server.
abort: Aborts an in-progress transfer.
直接按文檔說(shuō)明調(diào)用即可，它的特點(diǎn)是只支持一個(gè)文件的操作斑响，所以相應(yīng)后臺(tái)服務(wù)只接收一個(gè)文件的處理舰罚，上傳多個(gè)文件就多次調(diào)用营罢，而每個(gè)方法是一個(gè)promise的異步操作，常規(guī)情況缕溉，把多個(gè)promise最后做一個(gè)同步即可倒淫。
2运翼、form上傳
上述上傳文件方法兴枯，需要發(fā)送多次網(wǎng)絡(luò)請(qǐng)求财剖，有些人不喜歡這樣躺坟，想一次性上傳所有文件咪橙，那可以構(gòu)建一個(gè)多個(gè)文件的表單數(shù)據(jù)提交美侦。
首先菠剩，先寫(xiě)一個(gè)方法讀取文件為form表單可識(shí)別的blob格式：
然后調(diào)用該方法構(gòu)建form表單數(shù)據(jù)并上傳提交：
其中這里要注意的是准颓，后臺(tái)接口服務(wù)要接收多個(gè)文件處理瞬场。commonProvider為封裝的http請(qǐng)求方法，請(qǐng)求頭為{'Content-Type':'multipart/form-data'}，另外代碼完全可以不使用cacheData變量看幼，直接在filePaths.foreach里面就構(gòu)建formData诵姜，這樣就省下一些代碼，而我是因?yàn)槠渌虮Ａ暨@種寫(xiě)法心例。
當(dāng)然也可以像fileTransfer一樣止后，發(fā)送多次請(qǐng)求上傳：
最后我建議把上述方法封裝到一個(gè)provider里面译株，這樣即方便維護(hù)和調(diào)用歉糜，也利于其它項(xiàng)目使用现恼。
