.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 },
效果图