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


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 CSS修改学习第二章 样式
Feb 19 Javascript
jquery 图片上传按比例预览插件集合
May 28 Javascript
JavaScript实现存储HTML字符串示例
Apr 21 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
Jul 31 Javascript
JQuery中使用.each()遍历元素学习笔记
Nov 08 Javascript
学习javascript面向对象 理解javascript原型和原型链
Jan 04 Javascript
Vue.js中组件中的slot实例详解
Jul 17 Javascript
JS动画定时器知识总结
Mar 23 Javascript
关于单文件组件.vue的使用
Sep 20 Javascript
推荐15个最好用的JavaScript代码压缩工具
Feb 13 Javascript
详解JS实现系统登录页的登录和验证
Apr 29 Javascript
jsonp格式前端发送和后台接受写法的代码详解
Nov 07 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简洁函数(PHP简单明了函数语法)
2012/06/10 PHP
php获取网页中图片、DIV内容的简单方法
2014/06/19 PHP
PHP生成可点击刷新的验证码简单示例
2016/05/13 PHP
PHP从二维数组得到N层分类树的实现代码
2016/10/11 PHP
php 修改上传文件大小限制实例详解
2016/10/23 PHP
php实现自定义中奖项数和概率的抽奖函数示例
2017/05/26 PHP
PHP判断是否微信访问的方法示例
2019/03/27 PHP
了解jQuery技巧来提高你的代码
2010/01/08 Javascript
JavaScript随机排序(随即出牌)
2010/09/17 Javascript
关于jquery append() html时的小问题的解决方法
2010/12/16 Javascript
深入理解JavaScript 闭包究竟是什么
2013/04/12 Javascript
20条学习javascript的编程规范的建议
2014/11/28 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
2015/11/23 Javascript
jQuery中$.each()函数的用法引申实例
2016/05/12 Javascript
jQuery下拉菜单的实现代码
2016/11/03 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
2017/02/15 Javascript
jQuery EasyUI之验证框validatebox实例详解
2017/04/10 jQuery
Javascript ES6中数据类型Symbol的使用详解
2017/05/02 Javascript
vue 打包后的文件部署到express服务器上的方法
2017/08/09 Javascript
JavaScript+CSS相册特效实例代码
2017/09/07 Javascript
React中常见的动画实现的几种方式
2018/01/10 Javascript
jquery选择器和属性对象的操作实例分析
2020/01/10 jQuery
让mocha支持ES6模块的方法实现
2020/01/14 Javascript
Nuxt的动态路由和参数校验操作
2020/11/09 Javascript
python 获取本机ip地址的两个方法
2013/02/25 Python
Python BS4库的安装与使用详解
2018/08/08 Python
python3中datetime库,time库以及pandas中的时间函数区别与详解
2020/04/16 Python
pandas中read_csv、rolling、expanding用法详解
2020/04/21 Python
深入浅析Python代码规范性检测
2020/07/31 Python
美国家用和厨房电器销售网站:Appliances Connection
2020/01/24 全球购物
雅虎笔试题(字符串操作)
2015/03/24 面试题
工作会议主持词
2014/03/17 职场文书
不服从公司安排检讨书
2014/09/24 职场文书
学生喝酒检讨书500字
2014/11/02 职场文书
党的群众路线教育实践活动个人对照检查材料(教师)
2014/11/04 职场文书
二手房购房意向书
2015/05/09 职场文书