.wxml
1 <view> 2 <view class="tit-main"> 3 请提供相关问题的截图或照片 4 <text class="tit-deputy">(选填、最多6张)</text> 5 </view> 6 <view class="upImg"> 7 <view class="he" wx:if="{{arr!=[]}}"> 8 <block wx:for="{{arr}}"> 9 <view class="jia"> 10 <view class="del" data-index="{{index}}" bindtap="delClick">×</view> 11 <image class="show-image" mode="aspectFitf" src="{{item}}"></image> 12 </view> 13 </block> 14 </view> 15 <view class="jia jia2" bindtap="clickJia" wx:if="{{arr.length<=5}}"> 16 <image class="upImg-img" src="/static/ico/upImg.png"></image> 17 <view class="upWz">上传图片</view> 18 </view> 19 </view> 20 </view>
.js
1 data: { 2 arr: [], 3 imgUrl: '' 4 }, 5 // 添加图片 6 clickJia() { 7 var _this = this 8 wx.chooseImage({ 9 count: 6, 10 success: function(res) { 11 _this.setData({ 12 arr: [..._this.data.arr, ...res.tempFilePaths] 13 }) 14 if (_this.data.arr.length > 6) { 15 let arry = _this.data.arr.slice(0, 6) 16 _this.setData({ 17 arr: arry 18 }) 19 } 20 }, 21 }) 22 }, 23 //上传图片 24 uploadImgFile(imgList) { 25 let _this = this 26 let _data = _this.data 27 let _global = app.globalData 28 let pics = [] 29 let _url = `${_global.baseUrl}/emall-miniapp/feedback/UploadPictures` 30 const promises = imgList.map(item => { 31 return _this.uploadFile(_url, item).then(res => { 32 pics.push(_this.data.imgIdList) 33 }) 34 }) 35 Promise.all(promises).then(res => { 36 // 拼为以,隔开的字符串 37 let picStr = pics.join(',') 38 _this.submitRefund(picStr) 39 }) 40 }, 41 /** 42 * 上传 43 */ 44 uploadFile(url, src) { 45 let _this = this 46 let _data = _this.data 47 return new Promise(function(resolve, reject) { 48 utils.globalShowTip(true) 49 wx.uploadFile({ 50 header: { 51 "Content-Type": "multipart/form-data" 52 }, 53 url: url, 54 filePath: src, 55 name: 'myPic', 56 formData: {}, 57 success: (res) => { 58 // 拼接调用提交接口时带的pic串 59 let _result = JSON.parse(res.data) 60 let imgIdList 61 if (_result.result && _result.result.pictureId) { 62 imgIdList = _result.result.pictureId 63 } 64 let strimg = _result.result.picPath + "," 65 _this.data.imgUrl.concat(strimg) 66 _this.setData({ 67 imgIdList: imgIdList, 68 imgUrl: _this.data.imgUrl.concat(strimg) 69 }) 70 resolve() 71 }, 72 fail: (res) => {}, 73 complete: () => {} 74 }) 75 }) 76 }, 77 // 删除图片 78 delClick(e) { 79 this.data.arr.splice(e.target.dataset.index, 1) 80 this.setData({ 81 arr: this.data.arr 82 }) 83 },
.wxss
1 .tit-main { 2 font-size: 29rpx; 3 color: #333; 4 font-weight: 500; 5 margin: 40rpx 0 27rpx 0; 6 } 7 8 .tit-deputy { 9 font-size: 20rpx; 10 color: #999; 11 } 12 .upImg { 13 width: 653rpx; 14 display: flex; 15 flex-wrap: wrap; 16 } 17 .he { 18 display: flex; 19 flex-wrap: wrap; 20 } 21 .jia { 22 width: 107rpx; 23 height: 107rpx; 24 border-radius: 7rpx; 25 display: flex; 26 flex-direction: column; 27 justify-content: center; 28 align-items: center; 29 margin-left: 20rpx; 30 position: relative; 31 margin-bottom: 20rpx; 32 } 33 34 .del { 35 width: 26rpx; 36 height: 26rpx; 37 border-radius: 50%; 38 background: #ddd; 39 color: #333; 40 font-weight: bold; 41 position: absolute; 42 top: -10rpx; 43 right: -10rpx; 44 font-size: 20rpx; 45 display: flex; 46 justify-content: center; 47 align-items: center; 48 } 49 .show-image { 50 width: 107rpx; 51 height: 107rpx; 52 border-radius: 7rpx; 53 } 54 .jia2 { 55 border: 1rpx solid rgba(208, 208, 208, 1); 56 } 57 .upImg-img { 58 width: 47rpx; 59 height: 36rpx; 60 } 61 .upWz { 62 font-size: 17rpx; 63 font-weight: 500; 64 color: rgba(153, 153, 153, 1); 65 margin-top: 10rpx; 66 }
效果图
