【技巧】Ionic3多文件上传

关于ionic3多文件上传，网上资料非常少，特别是基于form方式的，有也大多因为代码过期而失效，因为有人问到，所以写一下。

因为写blog的网络环境打不开ionic的官网，所以链接都是指向github

文件上传，我们一般需要和本地文件打交道，先安装file插件（全称cordova-plugin-file）,

执行以下命令安装file插件及其对应的ionic-native模块：

ionic cordova plugin add cordova-plugin-file

npm install @ionic-native/file --save

用时ts头部先导入：

import { File } from '@ionic-native/file';

接着构造函数注入File

constructor(private file:File){}

然后可以用两种方式实现：

fileTransfer插件      vs      form上传

1、fileTransfer

先执行以下命令安装fileTransfer插件（全称cordova-plugin-file-transfer）及其对应的ionic-native模块：

ionic cordova plugin add cordova-plugin-file-transfer

npm install @ionic-native/transfer --save

其中，fileTransfer提供三个方法：

upload: Sends a file to a server.

download: Downloads a file from server.

abort: Aborts an in-progress transfer.

直接按文档说明调用即可，它的特点是只支持一个文件的操作，所以相应后台服务只接收一个文件的处理，上传多个文件就多次调用，而每个方法是一个promise的异步操作，常规情况，把多个promise最后做一个同步即可。

单文件上传

多文件上传同步

2、form上传

上述上传文件方法，需要发送多次网络请求，有些人不喜欢这样，想一次性上传所有文件，那可以构建一个多个文件的表单数据提交。

首先，先写一个方法读取文件为form表单可识别的blob格式：

读取文件为blob格式

然后调用该方法构建form表单数据并上传提交：

构建表单数据并一次上传

其中这里要注意的是，后台接口服务要接收多个文件处理。commonProvider为封装的http请求方法，请求头为{'Content-Type':'multipart/form-data'}，另外代码完全可以不使用cacheData变量，直接在filePaths.foreach里面就构建formData，这样就省下一些代码，而我是因为其它原因保留这种写法。

当然也可以像fileTransfer一样，发送多次请求上传：

构建表单数据并多次上传

最后我建议把上述方法封装到一个provider里面，这样即方便维护和调用，也利于其它项目使用。