脚本宝典收集整理的这篇文章主要介绍了微信小程序chooseImage和previewImage使用方法，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
今天尝试了微信小程序的图片功能，选择图片和预览图片，开发工具是最新版哈。
具体如下：
wXMl文件：
<view class='loadpic' bindtap='chooseimage'>选择图片</view>
<view class='showPic'>
<view wx:for="{{imagesList}}" wx:for-item="image" wx_key="index" class="previewimg">
<image class='image' src="{{image}}" data-src="{{image}}" bindtap="PReviewImage"></image>
</view>
</view>
js文件：
data: {
imagesList: []
},
chooseImage: function () {
VAR that = this
wx.chooseImage({
count: 9, // 默认9
sizeType: ['original', 'comPressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
console.LOG(res)
// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
var tempFilePaths = res.tempFilePaths
that.setData({
imagesList: tempFilePaths
})
console.log(tempFilePaths)
}
})
},
previewImage: function (e) {
var current = e.target.dataset.src;
wx.previewImage({
current: current, // 当前显示图片的http链接
urls: this.data.imagesList // 需要预览的图片http链接列表
})
},
wxss文件:
.loadpic{
margin: 20px auto;
width: 500rpx;
height: 80rpx;
background: #d34c17;
text-align: center;
color: white;
line-height: 80rpx;
}
.previewimg{
padding: 10rpx;
float: left;
}
.image{
display: block;
width: 200rpx;
height: 200rpx;
}
.showPic{
margin: 0 auto;
width: 90%;
}
无论本地还是真机测试都可以哈！！！开始在网上找资料，找了好多都不成功，最后自己慢慢调试成功了！！！哭一个！！以上是脚本宝典为你收集整理的微信小程序chooseImage和previewImage使用方法全部内容，希望文章能够帮你解决微信小程序chooseImage和previewImage使用方法所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。