案例分享–小程序图片分组上传

在开发小程中,在一个项目需求需要上传多组照片,上传页面部分截图如下:

案例分享–小程序图片分组上传

因为分组比较多,不可能每一组写一个布局,因此使用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);
			}
		}
	});
}

相关

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服![email protected] 2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励! 3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负! 4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有站币奖励和额外收入!

立业阁 微信小程序教程 案例分享–小程序图片分组上传 https://www.liyege.cn/alfxxcxtpfzsc.html

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情
  • 最常见的情况是下载不完整, 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘
查看详情

相关文章