欢迎来到代码驿站!

JavaScript代码

当前位置:首页 > 网页前端 > JavaScript代码

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

时间:2021-02-13 11:13:01|栏目:JavaScript代码|点击:

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

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有效数字 显示指定位数

栏    目:JavaScript代码

下一篇:JavaScript深入V8引擎以及编写优化代码的5个技巧

本文标题:微信小程序实现同时上传多张图片

本文地址:http://www.codeinn.net/misctech/62281.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有