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


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关于select的相关操作说明
Jan 13 Javascript
JS与框架页的操作代码
Jan 17 Javascript
javascript 同时在IE和FireFox获取KeyCode的代码
Feb 07 Javascript
js读写(删除)Cookie实例详解
Apr 17 Javascript
javascript跟随滚动效果插件代码(javascript Follow Plugin)
Aug 03 Javascript
JQuery分屏指示器图片轮换效果实例
May 21 Javascript
Vue.js开发环境搭建
Nov 10 Javascript
原生js仿浏览器滚动条效果
Mar 02 Javascript
vue2.0项目实现路由跳转的方法详解
Jun 21 Javascript
Vue组件系列开发之模态框
Apr 18 Javascript
微信小程序按钮点击跳转页面详解
May 06 Javascript
解决vue请求接口第一次成功,第二次失败问题
Sep 08 Javascript
解决小程序无法触发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 STRING 陷阱原理说明
2010/07/24 PHP
php下连接mssql2005的代码
2011/01/17 PHP
php命令行用法入门实例教程
2014/10/27 PHP
PHP判断字符串长度的两种方法很实用
2015/09/22 PHP
PHP实现文件上传与下载实例与总结
2016/03/13 PHP
javascript 复杂的嵌套环境中输出单引号和双引号
2009/05/26 Javascript
JS 各种网页尺寸判断实例方法
2013/04/18 Javascript
jquery中get和post的简单实例
2014/02/04 Javascript
jquery单行文字向上滚动效果的实现代码
2014/09/05 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
2014/12/29 Javascript
javascript中clipboardData对象用法详解
2015/05/13 Javascript
js限制文本框只能输入中文的方法
2015/08/11 Javascript
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
2015/12/02 Javascript
jQuery解析json格式数据简单实例
2016/01/22 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
2016/05/05 Javascript
jquery获取复选框checkbox的值实现方法
2016/05/30 Javascript
详解AngularJS ui-sref的简单使用
2017/04/24 Javascript
完美解决axios在ie下的兼容性问题
2018/03/05 Javascript
什么时候不能在 Node.js 中使用 Lock Files
2019/06/24 Javascript
javascript全局自定义鼠标右键菜单
2020/12/08 Javascript
PHP webshell检查工具 python实现代码
2009/09/15 Python
python修改字典内key对应值的方法
2015/07/11 Python
Python中pygame安装方法图文详解
2015/11/11 Python
python用插值法绘制平滑曲线
2021/02/19 Python
celery在python爬虫中定时操作实例讲解
2020/11/27 Python
python 列表推导和生成器表达式的使用
2021/02/01 Python
阿联酋航空假期:Emirates Holidays
2018/03/20 全球购物
艺龙旅行网酒店预订:国内、港澳台酒店
2018/06/26 全球购物
来自Ocado的宠物商店:Fetch
2018/07/10 全球购物
旅游管理本科生求职信
2013/10/14 职场文书
预备党员思想汇报范文
2013/12/29 职场文书
党支部书记岗位责任制
2014/02/11 职场文书
一年级班主任工作总结2014
2014/11/08 职场文书
2014幼儿园教师个人工作总结
2014/11/08 职场文书
本科毕业论文致谢怎么写
2015/05/14 职场文书
数学复习课教学反思
2016/02/18 职场文书