<view class="weui-cells"> <view class="weui-cell"> <view class="weui-cell__bd"> <view class="weui-uploader"> <view class="weui-uploader__hd"> <view class="weui-uploader__title">圖片上傳</view> <view class="weui-uploader__info">{{files.length}} / 9</view> </view> <view class="weui-uploader__bd"> <view class="weui-uploader__files" id="uploaderFiles"> <block wx:for="{{files}}" wx:key="*this"> <view class="weui-uploader__file" bindtap="previewImage" bindlongpress="deleteImage" id="{{item}}" data-index="{{index}}"> <image class="weui-uploader__img" src="{{item}}" mode="aspectFill"/> </view> </block> </view> <view wx:if="{{files.length < 9}}" class="weui-uploader__input-box" > <view class="weui-uploader__input" bindtap="chooseImage"></view> </view> </view> </view> </view> </view> </view>
Page({ data: { files: [] }, chooseImage: function(e) { var that = this; var images = that.data.files; wx.chooseImage({ count: 9 - images.length, sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], success: function(res) { // 返回選定照片的本地文件路徑列表,tempFilePath可以作為img標簽的src屬性顯示圖片 that.setData({ files: that.data.files.concat(res.tempFilePaths) }); } }) }, previewImage: function(e) { wx.previewImage({ current: e.currentTarget.id, urls: this.data.files }) }, deleteImage: function(e) { var that = this; var images = that.data.files; var index = e.currentTarget.dataset.index; //獲取當前長按圖片下標 wx.showModal({ title: '系統提醒', content: '確定要刪除此圖片嗎?', success: function(res) { if (res.confirm) { images.splice(index, 1); } else if (res.cancel) { return false; } that.setData( files: images }); } }) } })