效果图
原理
使用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>
WXSS
page{background-color: #efeff4;} .tui-preview-img{ width: 200rpx; height: 120rpx; }
JS
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链接。
相关推荐:
jQuery使用uploadView如何实现图片预览上传功能的实例
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。