上传多张图片
wxmll
view 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;}js
const 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 }) } } }); },})
