微信小程序 从本地相册选择图片或使用相机拍照chooseImage()和预览图片previewIma
发表时间:2021-3-31
发布人:葵宇科技
浏览次数:78
要实现的效果如图所示
wxml:
<view class='suggest_img'>请提供相关问题的截图或照片</view>
<view class='img_box'>
<block wx:for="{{add_img}}" wx:key="{{index}}">
<view class='have_img'>
<image src='{{item}}' class='sug_picture' data-num="{{index}}" catchtap='preview_img'></image>
<image src='../../images/delete_img.png' style='width:40rpx;height:40rpx;' data-num="{{index}}" class='delete_img' catchtap='delete_th'></image>
</view>
</block>
<view class='no_img' bindtap="gotoShow">
<image src='../../images/no_img.png'></image>
<view>上传图片</view>
</view>
</view>
js:
data: {
add_img:[]
},
gotoShow:function(){
var that=this;
wx.chooseImage({
success: function(res) {
// console.log(res.tempFilePaths)
var src = res.tempFilePaths;
var aa=that.data.add_img.concat(src)
// console.log(aa)
that.setData({
add_img:aa
})
},
})
},
delete_th:function(e){
var num=e.currentTarget.dataset.num;
var that=this;
wx.showModal({
title: '提示',
content: '确定要删除吗?',
success: function (res) {
if (res.confirm) {
that.data.add_img.splice(num,1)
that.setData({
add_img:that.data.add_img
})
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
},
preview_img:function(e){
var cur_num=e.currentTarget.dataset.num;
var img_list=this.data.add_img
wx.previewImage({
current:img_list[cur_num],
urls: this.data.add_img
})
},