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


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 相关文章推荐
js下关于onmouseout、事件冒泡的问题经验小结
Dec 09 Javascript
创建、调用JavaScript对象的方法集锦
Dec 24 Javascript
Javascript中innerHTML用法实例分析
Jan 12 Javascript
jQuery实现悬浮在右上角的网页客服效果代码
Oct 24 Javascript
原生js实现对Ajax的封装(仿jquery)
Jan 22 Javascript
Angular.JS通过指令操作DOM的方法
May 10 Javascript
微信小程序实现页面分享onShareAppMessage
Aug 12 Javascript
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
Sep 19 Javascript
npm全局环境变量配置详解
Dec 15 Javascript
通过vue.extend实现消息提示弹框的方法记录
Jan 07 Vue.js
Vue实现动态查询规则生成组件
May 27 Vue.js
vue实现水波涟漪效果的点击反馈指令
May 31 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文件时顶部出现空白影响布局分析原因及解决办法
2013/01/11 PHP
php定时计划任务与fsockopen持续进程实例
2014/05/23 PHP
Laravel框架基于中间件实现禁止未登录用户访问页面功能示例
2019/01/17 PHP
才发现的超链接js导致网页中GIF动画停止的解决方法
2007/11/02 Javascript
jQuery自定义事件的简单实现代码
2014/01/27 Javascript
JS实现超炫网页烟花动画效果的方法
2015/03/02 Javascript
Bootstrap的图片轮播示例代码
2015/08/31 Javascript
jQuery解析json格式数据简单实例
2016/01/22 Javascript
jQuery中判断对象是否存在的方法汇总
2016/02/24 Javascript
jQuery对象与DOM对象转换方法详解
2016/05/10 Javascript
js评分组件使用详解
2017/06/06 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
2018/08/08 jQuery
vue elementui form表单验证的实现
2018/11/11 Javascript
Vue组件间通信方法总结(父子组件、兄弟组件及祖先后代组件间)
2019/04/17 Javascript
如何给element添加一个抽屉组件的方法步骤
2019/07/14 Javascript
Vue和React有哪些区别
2020/09/12 Javascript
vue data有值,但是页面{{}} 取不到值的解决
2020/11/09 Javascript
[05:49]2014DOTA2TI4正赛第二日综述 昔日冠军纷纷落马 VG LGD占尽先机
2014/07/20 DOTA
零基础写python爬虫之HTTP异常处理
2014/11/05 Python
浅析python继承与多重继承
2018/09/13 Python
Python实现繁?转为简体的方法示例
2018/12/18 Python
树莓派采用socket方式文件传输(python)
2019/06/22 Python
Python 获取numpy.array索引值的实例
2019/12/06 Python
如何在Windows中安装多个python解释器
2020/06/16 Python
详解基于Scrapy的IP代理池搭建
2020/09/29 Python
localStorage 设置过期时间的方法实现
2018/12/21 HTML / CSS
伦敦时尚生活的缩影:LN-CC
2017/01/24 全球购物
Lookfantastic瑞典:英国知名美妆购物网站
2018/04/06 全球购物
大学生新学期计划书
2014/04/28 职场文书
工会换届选举方案
2014/05/21 职场文书
党员目标管理责任书
2014/07/25 职场文书
2015年清明节网上祭英烈活动总结
2015/03/26 职场文书
第一军规观后感
2015/06/12 职场文书
大学生党课感想
2015/08/11 职场文书
党性修养心得体会2016
2016/01/21 职场文书
Python OpenCV实现传统图片格式与base64转换
2021/06/13 Python