【技巧】Ionic3多文件上传

96
IT晴天
2017.08.12 12:31* 字数 631

关于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里面,这样即方便维护和调用,也利于其它项目使用。

ionic3开发指南