微信小程序图片预览功能的实现代码

效果图

原理

• 使用wx.chooseImage选择本地图片；

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链接。

AJAX实现图片预览与上传及生成缩略图的方法

nodejs实现图片预览和上传的示例代码

jQuery使用uploadView如何实现图片预览上传功能的实例

以上就是微信小程序图片预览功能的实现代码的详细内容，更多内容请关注技术你好其它相关文章！