微信小程序实现同时上传多张图片


Posted in Javascript onFebruary 03, 2020

本文实例为大家分享了微信小程序实现同时上传多张图片的具体代码,供大家参考,具体内容如下

1.图片选择后,路径已经存入list中:

data: { 
 images: [], //选择的图片 
 },

2.调用递归上传的方法:

wx.chooseImage({
 var that = this
 count: 9,
 sizeType: ['original', 'compressed'],
 sourceType: ['album', 'camera'],
 success: function(res){ 
 var successUp = 0; //成功,初始化为0
 var failUp = 0; //失败,初始化为0
 var length = that.data.images.length; //总共上传的数量
 var count = 0; //第几张,初始化为0
 var url = serverUrl + '/secondHand/uploadImg?id=' + secondHandId; //上传的接口
 //调用上传图片的公共函数
 that.uploadOneByOne(url, that.data.images, successUp, failUp, count, length);
 }, 
 });

3.递归上传方法:

/**
 * 上传图片:递归的方式上传
 * url:上传地址
 * imgPaths:上传的图片列表
 * successUp:上传成功的个数,初始化为0
 * failUp:上传失败的个数,初始化为0
 * count:第几张
 * length:图片列表的长度
 */
 uploadOneByOne(url, imgPaths, successUp, failUp, count, length) {
 var that = this;
 wx.uploadFile({
 url: url, //上传地址地址
 filePath: imgPaths[count],
 name: "file", //后台接收的文件名
 success: function(e) {
 successUp++; //成功+1
 },
 fail: function(e) {
 failUp++; //失败+1
 },
 complete: function(e) {
 count++; //下一张
 if (count == length) {
 TODO: 上传完毕后跳转页面
 wx.showToast({
 title: '发布成功',
 icon: 'success',
 duration: 2000
 })
 }
 else {
 //递归调用,上传下一张
 that.uploadOneByOne(url, imgPaths, successUp, failUp, count, length);
 }
 }
 })
 },

4.后台接口:

@PostMapping("/uploadImg")
public String addSecondHandImg(String id, @RequestParam("file") MultipartFile[] files) {
 //该接口被多次调用,这里写自己的业务,省略。。。
 return "";
}

文章参考:微信小程序实现上传多个文件 超过10个

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用Javascript读取中文COOKIE的解决办法
Feb 15 Javascript
教你如何解密js/vbs/vbscript加密的编码异处理小结
Jun 25 Javascript
Javascript和Java获取各种form表单信息的简单实例
Feb 14 Javascript
JS获取当前日期时间并定时刷新示例
Mar 04 Javascript
node.js [superAgent] 请求使用示例
Mar 13 Javascript
AngularJS 过滤器的简单实例
Jul 27 Javascript
JS简单实现仿百度控制台输出信息效果
Sep 04 Javascript
微信小程序 底部导航栏目开发资料
Dec 05 Javascript
fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法
Mar 24 Javascript
详解vue-cli开发环境跨域问题解决方案
Jun 06 Javascript
基于JQuery的Ajax方法使用详解
Aug 16 jQuery
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 Vue.js
解决小程序无法触发SESSION问题
Feb 03 #Javascript
vue组件创建的三种方式小结
Feb 03 #Javascript
Vuex模块化应用实践示例
Feb 03 #Javascript
微信小程序8种数据通信的方式小结
Feb 03 #Javascript
使用js实现单链解决前端队列问题的方法
Feb 03 #Javascript
javscript 数组扁平化的实现
Feb 03 #Javascript
Vue强制组件重新渲染的方法讨论
Feb 03 #Javascript
You might like
php中global和$GLOBALS[]的分析之一
2012/02/02 PHP
关于PHP自动判断字符集并转码的详解
2013/06/26 PHP
PHP批量查询WordPress留言者E-mail地址实现方法
2015/02/15 PHP
php无限级分类实现评论及回复功能
2019/02/18 PHP
javascript Demo模态窗口
2009/12/06 Javascript
JS模拟自动点击的简单实例
2013/08/08 Javascript
JavaScript中的undefined学习总结
2013/11/30 Javascript
jQuery中append()方法用法实例
2014/12/25 Javascript
jQuery使用hide方法隐藏指定元素class样式用法实例
2015/03/30 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
2015/12/12 Javascript
轻松实现jquery手风琴效果
2016/01/14 Javascript
jQuery滚动插件scrollable.js用法分析
2017/05/25 jQuery
AngularJS发送异步Get/Post请求方法
2018/08/13 Javascript
解决vue的变量在settimeout内部效果失效的问题
2018/08/30 Javascript
jQuery控制input只能输入数字和两位小数的方法
2019/05/16 jQuery
[01:48]DOTA2 2015国际邀请赛中国区预选赛第二日战报
2015/05/27 DOTA
[01:10:16]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第一局
2016/02/27 DOTA
[59:30]VG vs LGD 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.22
2019/09/05 DOTA
Python使用Paramiko模块编写脚本进行远程服务器操作
2016/05/05 Python
matplotlib绘制符合论文要求的图片实例(必看篇)
2017/06/02 Python
python之pandas用法大全
2018/03/13 Python
使用pandas读取csv文件的指定列方法
2018/04/21 Python
Django后台获取前端post上传的文件方法
2018/05/28 Python
pandas ix &iloc &loc的区别
2019/01/10 Python
python3.7通过thrift操作hbase的示例代码
2020/01/14 Python
Spartoo英国:欧洲最大的网上鞋店
2016/09/13 全球购物
GEOX鞋美国官方网站:意大利会呼吸的鞋
2017/07/12 全球购物
eBay澳大利亚站:eBay.com.au
2018/02/02 全球购物
党支部公开承诺践诺书
2014/03/28 职场文书
验房委托书
2014/08/30 职场文书
预备党员思想汇报1000字
2014/10/07 职场文书
2014年采购员工作总结
2014/11/18 职场文书
2015医院个人工作总结范文
2015/05/21 职场文书
舞出我人生观后感
2015/06/16 职场文书
庆祝教师节主题班会
2015/08/17 职场文书
应届毕业生的自我评价
2019/06/21 职场文书