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