您的当前位置:首页【技巧】Ionic3多文件上传

【技巧】Ionic3多文件上传

2024-12-14 来源:哗拓教育

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

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

执行以下命令安装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){}

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

      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表单数据并上传提交:

构建表单数据并一次上传

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

构建表单数据并多次上传

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

显示全文