圖片預覽是一個很普遍的功能，本文主要和大家詳細介紹了微信小程式實現圖片預覽功能，具有一定的參考價值，有興趣的小伙伴們可以參考一下，希望能幫助到大家。
效果圖
#原則
#使用wx.chooseImage選擇本機圖片；
使用wx.previewImage預覽圖。
WXML
<view>
<button bindtap="previewImage" type="primary">图片上传预览</button>
<view class="tui-content">
<image class="tui-preview-img" wx:for="{{previewImageArr}}" bindtap="changePreview" src="{{item}}" src="{{item}}"></image>
</view>
</view>page{background-color: #efeff4;}
.tui-preview-img{
width: 200rpx;
height: 120rpx;
}Page({
data: {
previewImageArr:[]
},
previewImage(e){
var self = this;
wx.chooseImage({
count:8,
success(res) {
var tempFilePaths = res.tempFilePaths;
self.setData({ previewImageArr: tempFilePaths});
}
})
},
changePreview(e){
var self = this;
wx.previewImage({
current: e.currentTarget.dataset.src,
urls: self.data.previewImageArr
})
}
})#wx.previewImage的參數current和urls必須是http連結。
###nodejs實作圖片預覽和上傳的範例程式碼############jQuery使用uploadView如何實作圖片預覽上傳功能的實例######以上是微信小程式圖片預覽功能的實作程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
