微信小程序实现同时上传多张图片
更新时间:2020年02月03日 14:23:06 作者:文龙z
这篇文章主要为大家详细介绍了微信小程序实现同时上传多张图片,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序实现同时上传多张图片的具体代码,供大家参考,具体内容如下
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个
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
用js实现终止浏览器对页面HTML的继续解析即停止解析 兼容firefox
用js实现终止浏览器对页面HTML的继续解析即停止解析 兼容firefox...2007-11-11JavaScript中手动实现Array.prototype.map方法
在前端开发中,我们经常需要对数组进行操作和处理,本文主要介绍了JavaScript中手动实现Array.prototype.map方法,具有一定的参考价值,感兴趣的可以了解一下2024-02-02JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
这篇文章主要介绍了JS/HTML5游戏常用算法之碰撞检测 像素检测算法,结合实例形式详细分析了javascript像素检测碰撞算法的原理、实现步骤及相关操作技巧,需要的朋友可以参考下2018-12-12
最新评论