微信小程序wx.chooseImage和wx.previewImage的综合使用,图片上传不限制最多张数
WXML:
<view class="weui"> <view class="weui-uploader"> <view class="weui-uploader__files"> <block wx:for="{{imageList}}" wx:for-item="image" wx:for-index='idx'> <view class="weui-uploader__file"> <image class="weui-uploader__img" src="{{image}}" data- data-src="{{image}}" bindtap="previewImage"></image> </view> </block> </view> <view class="weui-uploader__input-box"> <view class="weui-uploader__input" bindtap="chooseImage"></view> </view> </view> </view>
WXSS:
page { font-family: -apple-system-font, "Helvetica Neue", sans-serif; } icon { vertical-align: middle; } .weui{ width: 100%; height: auto; display: flex; flex-direction: column; background-color: #fff; } .weui-uploader{ width: 94%; margin-left: 3%; padding: 0px 0px 9px; } .weui-uploader__file { float: left; margin-right: 9px; margin-top: 9px; } .weui-uploader__img { display: block; width: 79px; height: 79px; } .weui-uploader__file_status { position: relative; } .weui-uploader__input-box { float: left; position: relative; margin-right: 9px; margin-top: 9px; width: 77px; height: 77px; border: 1px solid #d9d9d9; } .weui-uploader__input-box:before, .weui-uploader__input-box:after { content: " "; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: #d9d9d9; } .weui-uploader__input-box:before { width: 2px; height: 39.5px; } .weui-uploader__input-box:after { width: 39.5px; height: 2px; } .weui-uploader__input-box:active { border-color: #999; } .weui-uploader__input-box:active:before, .weui-uploader__input-box:active:after { background-color: #999; } .weui-uploader__input { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; }
JS:
Page({ data: { imageList: [], }, chooseImage: function (event) { var that = this; wx.chooseImage({ count: 5, // 一次最多可以选择2张图片一起上传 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 success: function (res) { var imgeList=that.data.imageList.concat(res.tempFilePaths); that.setData({ imageList: imgeList }); } }) }, previewImage: function (e) { var that = this; var dataid = e.currentTarget.dataset.id; var imageList = that.data.imageList; wx.previewImage({ current: imageList[dataid], urls: this.data.imageList }); } })