微信小程序-------form表单--------多图上传操作

功能：多图上传图片

实现效果

 

html

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<view class="inner_toptitle">     <view class="img_list">         <view wx:for="{{imgBigList}}" class="img_item" bindtap="previewClick" data-index="{{index}}">             <view class="up_img">                 <image style="max-width: 100%; max-height: 100%;" mode="aspectFit" src="{{domain+item}}"></image>                 <view class="del" catchtap="closeClick" data-index="{{index}}">×</view>             </view>         </view>         <view wx:if="{{imgBigList.length<9}}" bindtap="uploadClick" class="img_item">             <view class="up_img01">                 <view class="centerimg">                     <view class="add">                         <image src="../../../style/img/enroll03.png" alt=""></image>                     </view>                 </view>             </view>         </view>         <view class="clear"></view>     </view> </view>

 

css

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69

/* 上传图片 */ .img_list {}   .add {     width: 100px;     height: 100px;     line-height: 100px;     text-align: center;     background-color: #f9f9f9; }   .add image {     width: 25px;     height: 25px;     text-align: center;   }   .img_item {     /* width: 100px;     height: 100px; */     float: left;     width: 33.3%;     text-align: center;     margin: 0px;   }   .up_img image {     width: 100px;     height: 100px;     text-align: center;   }   .up_img {     position: relative; }   .del {     position: absolute;     top: 0px;     right: 0px; }   .tipbottom { }   .tipbottom .btn {     float: left; }   .tipbottom .btn1 {     margin-right: 10px; }   .tipbtn {     font-size: 12px;     box-sizing: border-box;     padding: 3px 10px;     background: #e0efff;     color: #0179de;   }   .tipbtn2 {     background: #3693e1;     color: #ffffff; }

 

js

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57

//   上传图片 uploadClick: function () {     var _this = this;     var imgBigList = _this.data.imgBigList;     var imgSmallList = _this.data.imgSmallList;       var upload = new Upload(this, {         count: 9,         type: 'double',         minWidth: 132,         minHeight: 132,         maxWidth: 1080,         maxHeight: 1920,         onSuccess: function (res) {             imgBigList.push(res.big.relativeName);             imgSmallList.push(res.small.relativeName);             var Blist = String(imgBigList);             var Slist = String(imgSmallList);             _this.setData({                 imgBigList: imgBigList,                 imgSmallList: imgSmallList,                 Blist: Blist,                 Slist: Slist             })         },     });     upload.choose(); }, // 预览 previewClick(e) {       var _this = this     var index = e.currentTarget.dataset.index;     var imgBigList = _this.data.imgBigList;     var domain = this.data.domain;     var list = [];     imgBigList.forEach(element => {         list.push(domain + element)     });     console.info(list)     wx.previewImage({         current: list[index],         urls: list,     });   }, // 移除图片 closeClick(e) {     var _this = this     var index = e.currentTarget.dataset.index;     var imgBigList = _this.data.imgBigList;     imgBigList.splice(index, 1);     _this.setData({         imgBigList: imgBigList,     });   },