正文

微信小程序图片选择，预览和删除

IP云
IP云V管理员/1 阅读
07/30
小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

这里均用的是小程序原生api

废话不多说直接上栗子：

<view class="addImv"> <!--这个是已经选好的图片--> <view wx:for="{{banner}}" wx:key="key" class="upFile" bindtap="showImageBanner" style="border-radius: 5px" data-id="{{index}}"> <image class="itemImv" src="{{item}}"></image> <image class="closeImv" src="../../resources/images/delect.png" mode="scaleToFill" catchtap="deleteImvBanner" data-id="{{index}}"></image> </view> <!--这个是选择图片--> <view class="chooseView" bindtap="chooseBanner" style="border-radius: 5px" wx:if="{{chooseViewShowBanner}}"> <image class="chooseImv" src="../../resources/images/add.png"></image> </view> </view>

/*选择图片View*/.addImv { background-color: white; /* border: 1px dashed gray; */ display: flex; flex-wrap: wrap; align-items: center; margin-top: 5rpx;}.upImv { background-color: white; width: 100%; margin-top: 5rpx;}.upImv_text { font-size: 30rpx; margin-left: 20rpx; padding-top: 20rpx;}/*添加图片*/.addImv .chooseView { width: 180rpx; height: 180rpx; margin: 20rpx 20rpx; background-color: #f2f6f9; border: 1px dashed lightgray; text-align: center; line-height: 180rpx; /* padding: 0rpx 7rpx; */ border-radius: 5px; margin-left: 40rpx;}.addImv .chooseImv { width: 50rpx; height: 50rpx;}/*已选择的图片*/.addImv .upFile { width: 180rpx; height: 180rpx; position: relative; padding: 0rpx 7rpx; margin-left: 40rpx; border: 1px solid #c0ccda;}.addImv .upFile .itemImv { width: 180rpx; height: 180rpx; padding: 0rpx 7rpx;}.addImv .upFile .closeImv { position: absolute; right: 0rpx; top: 0rpx; width: 50rpx; height: 50rpx;}

CSS

Page({ /** * 页面的初始数据 */ data: { banner: [], //轮播图片 }, /** 选择图片Banner */ chooseBanner: function() { var that = this; if (this.data.banner.length < 2) { wx.chooseImage({ count: 2, //最多选择2张图片- that.data.banner.length, sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有 success: function(res) { // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片 console.log(res.tempFilePaths); if (res.tempFilePaths.count == 0) { return; } //上传图片 var imgArrNow = that.data.banner; imgArrNow = imgArrNow.concat(res.tempFilePaths); that.setData({ banner: imgArrNow }) that.chooseViewShowBanner(); } }) } else { wx.showToast({ title: '限制选择6个文件', icon: 'loading', duration: 1000 }) } }, /** 删除图片Banner */ deleteImvBanner: function(e) { var banner = this.data.banner; var itemIndex = e.currentTarget.dataset.id; banner.splice(itemIndex, 1); this.setData({ banner: banner }) //判断是否隐藏选择图片 this.chooseViewShowBanner(); }, /** 是否隐藏图片选择Banner*/ chooseViewShowBanner: function() { if (this.data.banner.length >= 2) { this.setData({ chooseViewShowBanner: false }) } else { this.setData({ chooseViewShowBanner: true }) } }, /** 查看大图Banner */ showImageBanner: function(e) { var banner = this.data.banner; var itemIndex = e.currentTarget.dataset.id; console.log("itemIndex:" + JSON.stringify(e)) wx.previewImage({ current: banner[itemIndex], // 当前显示图片的http链接 urls: banner // 需要预览的图片http链接列表 }) },})

JS

小程序图片选择到这里就结束了，如有不明白的地方欢迎留言一起讨论