全网整合营销服务商

营销型网站+SEO优化+关键词快排=一站式服务

免费咨询热线:15959292472

[淮北seo公司皆选久澳]案例分享--小程序图片分组上传

  在开发小程中◁▪▷…,在一个项目需求需要上传多组照片,上传页面部分截图如下○•▲▽:

  因为分组比较多,[普洱seo公司稳健久澳]如何实现小程序推送模板消息,不可能每一组写一个布局,拉萨市小程序开发哪家好因此使用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++;//图片上传成功,[淮北seo公司皆选久澳]图片上传成功的变量+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)…★■▷;
			}
		}
	});
}

 

   相关推荐:

  微信小程序开发上传图片功能实例分享

  CodeIgniter上传图片成功的全部过程分享

  以上就是案例分享--小程序图片分组上传的详细内容,更多请关注久澳传媒编程栏目其它相关文章◁☆•!

[淮北seo公司皆选久澳]案例分享--小程序图片分组上传

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。