小程序图片分组上传的方法
小编给大家分享一下小程序图片分组上传的方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
超过十多年行业经验,技术领先,服务至上的经营模式,全靠网络和口碑获得客户,为自己降低成本,也就是为客户降低成本。到目前业务范围包括了:成都网站设计、成都网站制作,成都网站推广,成都网站优化,整体网络托管,小程序设计,微信开发,APP应用开发,同时也可以让客户的网站和网络营销和我们一样获得订单和生意!
在开发小程中,在一个项目需求需要上传多组照片,上传页面部分截图如下:
因为分组比较多,不可能每一组写一个布局,因此使用for循环进行图片的选择显示,首先定义数据
fileList: [{ name: "驾驶证", cid:"0", picimage:[], }, { name: "整车外观", cid: "1", picimage: [], }, { name: "整车铭牌", cid: "2", picimage: [], }, { name: "发动机全貌", cid: "3", picimage: [], },{ name: "增压器全貌", cid: "4", picimage: [], }]
页面布局代码部分就不贴出了,使用循环遇到的问题有:1.调用同一个wx.chooseImage()会出现第二章覆盖第一张;2.所有组同时没法区分。解决办法:1.当选择图片时,将图片concat到数组中去。2.为每一个组设置一个id,当点击选择图片按钮时将id传过去,chooseImage根据所接收到的id选择将图片显示在哪个分组,关键代码如下:
chooseWxImage: function (e) { var _this = this; var id = e.currentTarget.dataset.picid; console.log("id-----" + id) if (_this.data.fileList[id].picimage.length>1){ wx.showModal({ content: '你最多只能选择2张照片', showCancel:false, }) }else{ wx.chooseImage({ count:2, sizeType: "compressed", sourceType: ['album', 'camera'], success: function (res) { var arr = _this.data.fileList[id].picimage; for (let i in res.tempFilePaths) { arr.push(res.tempFilePaths[i]) } _this.setData({ fileList: _this.data.fileList }) } })} },
上传部分,因为小程序只能一张一张上传,因此需要对uploading方法进行处理,先将所有图片数组放到一个集合中,然后对集合进行遍历,以数组为单位进行上传。
upload: function (e) { var that = this; var fileList = that.data.fileList; var tempath = [] ;//图片地址,将所有图片数组放进去 for(let i in fileList){ tempath.push(fileList[i].picimage) } console.log("tempimage"+tempath) wx.showLoading({ title: '上传中...', }) for (let j in tempath) { requestUtil.uploadimg({//uploading为封装的一个方法 url: '上传地址', path: tempath[j],//遍历地址,将每个数组循环上传 }) wx.hideLoading(); wx.showToast({ title: '上传成功!', icon:'success', duration:'2500', }) } } //多张图片上传,这部分代码是参考网上的,使用当中遇到一个bug就是如果传过来的数组为空的话,就会卡死小程序,因此需要加上判断数组不能为空 function uploadimg(data) { var that = this, i = data.i ? data.i : 0,//当前上传的哪张图片 success = data.success ? data.success : 0,//上传成功的个数 fail = data.fail ? data.fail : 0;//上传失败的个数 wx.uploadFile({ url: data.url, filePath: data.path[i], name: 'file',//这里根据自己的实际情况改 formData: data.formData,//这里是上传图片时一起上传的数据 success: (resp) => { if (resp.statusCode == 200) { success++;//图片上传成功,图片上传成功的变量+1 console.log(resp) console.log(i); } }, fail: (res) => { fail++;//图片上传失败,图片上传失败的变量+1 console.log(data.path) console.log('fail:' + i + "fail:" + fail); }, complete: () => { console.log(i); i++;//这个图片执行完上传后,开始上传下一张 if (i == data.path.length) { //当图片传完时,停止调用 console.log('执行完毕'); console.log('成功:' + success + " 失败:" + fail); } else {//若图片还没有传完,则继续调用函数 console.log(i); data.i = i; data.success = success; data.fail = fail; that.uploadimg(data); } } }); }
以上是“小程序图片分组上传的方法”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
当前题目:小程序图片分组上传的方法
本文链接:http://scyanting.com/article/jdsdoi.html