uploads.wxml
<view class="picture"> <text class=\'index-4\'>上传带看截图: </text> <view class=\'proofimgs\'> <view class=\'pick\' bindtap="chooseImg"> + </view> <view class="img" wx:for="{{imgs}}" wx:for-item="item" wx:key="*this"> <image class=\'imgSelected\' src="{{item}}" data-index="{{index}}" mode="aspectFill" bindtap=\'previewImg\'></image> <image class=\'del\' src=\'/images/null.jpg\' data-index="{{index}}" catchtap="deleteImg"></image> </view> </view> </view>
uploads.wxss
.index-4 { margin-left: 85rpx; color: #fff; padding-top: 20rpx; display: block; } .proofimgs { margin-top: 20rpx; margin-left: 90rpx; width: 73%; } .pick { width: 150rpx; height: 150rpx; color: #fff; background: #000; text-align: center; opacity: 0.6; border-radius: 30rpx; font-size: 100rpx; font-weight: bold; } .img { display: flex; align-items: top; margin-top: 20rpx; } .imgSelected { width: 100%; } .del { width: 40rpx; height: 40rpx; margin-top: -20rpx; margin-left: -20rpx; }
uploads.js
data: { index: 0, multiIndex: [0, 0], //传到后台的课程分类 cname: \'\', imgs: [], proof: \'\' }, //选择图片 chooseImg: function(e) { var that = this; console.log(that); if (that.data.cname == \'\') { } else { var imgs = this.data.imgs; if (imgs.length >= 9) { this.setData({ lenMore: 1 }); setTimeout(function() { that.setData({ lenMore: 0 }); }, 2500); return false; } } wx.chooseImage({ // count: 1, // 默认9 sizeType: [\'original\', \'compressed\'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: [\'album\', \'camera\'], // 可以指定来源是相册还是相机,默认二者都有 success: function(res) { // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片 var tempFilePaths = res.tempFilePaths; var imgs = that.data.imgs; console.log(res,5255); // console.log(tempFilePaths + \'----\'); for (var i = 0; i < tempFilePaths.length; i++) { if (imgs.length >= 9) { that.setData({ imgs: imgs }); return false; } else { imgs.push(tempFilePaths[i]); } } // console.log(imgs); that.setData({ imgs: imgs, }); //循环把图片上传到服务器 for (var i = 0; i < imgs.length; i++) { wx.uploadFile({ url: \'\', filePath: imgs[i], name: \'files\', formData: { cname: that.data.cname }, success: function(res) { var hhsd = res.data.replace(/\"/g, ""); that.data.proof = that.data.proof.concat(hhsd + \',\'); that.setData({ proof: that.data.proof }); } }) } } }); }, // 删除图片 deleteImg: function (e) { var imgs = this.data.imgs; var index = e.currentTarget.dataset.index; imgs.splice(index, 1); this.setData({ imgs: imgs }); }, // 预览图片 previewImg: function (e) { //获取当前图片的下标 var index = e.currentTarget.dataset.index; //所有图片 var imgs = this.data.imgs; wx.previewImage({ //当前显示图片 current: imgs[index], //所有图片 urls: imgs }) },
请发表评论