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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏ytkah

finecms如何批量替换文章中的关键词?

  Finecms批量替换文章关键词要怎么操作呢,比如把关键词A换为B?Finecms是免费开源无商业限制的内容管理系统,个人在维护,但二次开发很灵活,我们可以...

35830
来自专栏章鱼的慢慢技术路

Unity Package Manager Error的解决方案

51750
来自专栏orientlu

mysql 本地连接失败(必须使用-h127.0.0.1)解决

通过 find 命令查找 mysql.sock 文件,发现文件不存在,我的理解是 mysql 创建该文件的时候失败了。

68230
来自专栏凉城

文章内的新浪短网址https无法访问解决办法!

25940
来自专栏黑泽君的专栏

Linux命令复习和练习

23210
来自专栏前端大白专栏

关于roadhogrc 新版本问题

17050
来自专栏林德熙的博客

win10 uwp 隐藏实时可视化

13320
来自专栏13blog.site

springboot开启access_log日志输出

由于在调试时需要查看access_log日志,但是springboot默认并没有开启,因此查看了一下文档,在springboot的配置文件中添加如下设置,即可将...

65050
来自专栏云计算教程系列

如何在Ubuntu 18.04上配置Node.js生产环境应用

Node.js是一个开源JavaScript运行环境,用于构建服务器端和网络应用程序。该平台可在Linux,macOS,FreeBSD和Windows上运行。虽...

18630
来自专栏GreenLeaves

Oracle 客户端、服务器、数据库、数据库对象(表、视图等)的关系

1、数据库服务器 所谓数据库服务器,只是在机器上安装了一个数据库管理软件,这个软件可以管理多个数据库.一般开发人员会针对每一个应用创建一个数据库 2、单实例数据...

25360

扫码关注云+社区

领取腾讯云代金券