E企盈营销工具技术服务商 热线:4006-838-530

微信小程序商城类项目使用到的前端效果(4)——多图上传

E企盈直播平台营销卖货系统

上传多张图片wxmllview class=”upload-img”  text上传凭证/text  view class=”img-list”     view class=”img-item” wx:for=”{{voucher}}” wx:key=”index”      image class=”userinfo-avatar” src=”{{item}}” mode=”aspectFit” wx:if=”{{voucher.length != index+1}}”/image       image class=”userinfo-avatar” src=”{{item}}” mode=”aspectFit” bindtap=”addImg” wx:else/image       view  data-index=”{{index}}” bindtap=”delImg” wx:if=”{{voucher.length != index+1}}”X/view    /view  /view/viewwxss.upload-img text{  display: inline-block;  height:5vw;  font-size: 30rpx;  margin-bottom: 2vw;}.img-list{  display: flex;  flex-wrap: wrap;}.img-item{  width:28vw;  height:28vw;  margin-bottom:3vw;  margin-right: 2vw;  border:1px solid #ddd;  position: relative;}.img-item:last-child{  border:none;}.img-list image{  width:100%;  height:100%;}.img-item view{  color:#fff;  font-size: 3vw;  width:5vw;  height:5vw;  text-align: center;  line-height: 5vw;  border-radius: 2.5vw;  background: #797979;  position: absolute;  top:-1.5vw;  right:-1.5vw;}jsconst app = getApp()Page({  /**    * 页面的初始数据    */  data: {    voucher: [“/images/order/add-img.png”],  },  onLoad: function (options) {  },  addImg: function (e) {    var that = this;    var pics = [];    wx.chooseImage({      count: 9,// 默认9      sizeType: [‘original’, ‘compressed’],// 可以指定是原图还是压缩图,默认二者都有      sourceType: [‘album’, ‘camera’],// 可以指定来源是相册还是相机,默认二者都有      success: function (res) {        // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片        // var tempFilePaths = res.tempFilePaths;        var imgs = res.tempFilePaths;        for (var i = 0; i imgs.length; i++) {          pics.unshift(imgs[i])          var voucher = that.data.voucher;          voucher.unshift(imgs[i])          that.setData({            voucher: voucher,          });        }        that.uploadimg({          url: app.globalData.url + ‘frontend/web/v1/commons/uploadPic’,//这里是你图片上传的接口          path: pics,//这里是选取的图片的地址数组        })      }    })  },  //多张图片上传  uploadimg: function (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: ‘image’,//这里根据自己的实际情况改      formData: { type: “refund” },//这里是上传图片时一起上传的数据      header: {        “Content-Type”: “multipart/form-data”,//记得设置        “token”: app.globalData.token      },      success: (resp) = {        //图片上传成功,图片上传成功的变量+1        resp.data = JSON.parse(resp.data);        if (resp.data.code = 1) {          success++;        }        //这里可能有BUG,失败也会执行这里,所以这里应该是后台返回过来的状态码为成功时,这里的success才+1      },      fail: (res) = {        fail++;//图片上传失败,图片上传失败的变量+1        console.log(‘fail:’ + i + “fail:” + fail);      },      complete: () = {        i++;//这个图片执行完上传后,开始上传下一张        if (i == data.path.length) {   //当图片传完时,停止调用                    console.log(‘执行完毕’);          console.log(‘成功:’ + success + ” 失败:” + fail);        } else {//若图片还没有传完,则继续调用函数          data.i = i;          data.success = success;          data.fail = fail;          that.uploadimg(data);        }      }    });  },  delImg: function (e) {    var that = this    var voucherId = this.data.voucherId;    var voucher = this.data.voucher;    wx.request({      url: app.globalData.url + ‘frontend/web/v1/commons/delPic’,      method: ‘POST’,      data: {        media_id: voucherId[e.currentTarget.dataset.index]      },      header: {        “Content-Type”: “application/json”,        “token”: app.globalData.token      },      success: function (res) {        if (res.data.code == 1) {          voucherId.splice(e.currentTarget.dataset.index, 1);          voucher.splice(e.currentTarget.dataset.index, 1);          that.setData({            voucher: voucher,            voucherId: voucherId,          });        } else {          wx.showToast({            title: res.data.message,            icon: ‘none’,            duration: 2000          })        }      }    });  },})

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序商城类项目使用到的前端效果(4)——多图上传
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏