微信小程序选择图片控件
作者：小雅雅家的小凯凯吖
这篇文章主要为大家详细介绍了微信小程序选择图片控件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序选择图片控件的具体代码，供大家参考，具体内容如下
xml:
<loading hidden="{{loadingHidden}}">
加载中...
</loading>
<view class="add_carimg">
<block>
<view class="load_iamge">
<text class="load_head_text">上传施工车辆照片</text>
<text class="load_foot_text">{{imgbox.length}}/2</text>
</view>
<view class='pages'>
<view class="images_box">
<block wx:key="imgbox" wx:for="{{imgbox}}">
<view class='img-box'>
<image class='img' src='{{item}}' data-message="{{item}}" bindtap="imgYu"></image>
<view class='img-delect' data-deindex='{{index}}' bindtap='imgDelete1'>
<image class='img' src='/pages/images/delete_btn.png'></image>
</view>
</view>
</block>
<view class='img-box' bindtap='addPic1' wx:if="{{imgbox.length<2}}">
<image class='img' src='/pages/images/load_image.png'></image>
</view>
</view>
</view>
</block>
</view>
<view>
<button class="work_btn" bindtap="shanggang">上岗</button>
</view>
css:
.work_btn {
width: 60%;
height: 35px;
line-height: 35px;
margin-top: 15px;
border-radius: 5px;
font-size: 30rpx;
color: white;
background-color: rgb(2, 218, 247);
}
.work_btn:active {
width: 60%;
height: 35px;
line-height: 35px;
margin-top: 15px;
border-radius: 5px;
font-size: 30rpx;
color: white;
background-color: rgb(151, 222, 231);
}
/*********/
.load_iamge {
width: 100%;
height: 30px;
margin-top: 10px;
display: flex;
flex-direction: row;
}
.load_head_text {
width: 95%;
height: 20px;
margin-bottom: 5px;
margin-top: 5px;
}
.load_foot_text {
width: 5%;
height: 20px;
margin-right: 15px;
margin-top: 5px;
margin-bottom: 5px;
float: right;
}
.pages {
width: 98%;
margin: auto;
overflow: hidden;
}
/* 图片 */
.images_box {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
background-color: white;
}
.img-box {
border: 2rpx;
border-style: solid;
border-color: rgba(170, 167, 167, 0.452);
width: 200rpx;
height: 200rpx;
margin-left: 35rpx;
margin-top: 20rpx;
margin-bottom: 20rpx;
position: relative;
}
/* 删除图片 */
.img-delect {
width: 50rpx;
height: 50rpx;
border-radius: 50%;
position: absolute;
right: -20rpx;
top: -20rpx;
}
.img {
width: 100%;
height: 100%;
}
js:
Page({
/**
* 页面的初始数据
*/
data: {
tempFilePaths: '',
imgbox: [], //选择图片
fileIDs: [], //上传云存储后的返回值
src: 0,
},
onLoad: function (options) {
},
//图片点击事件
imgYu: function (event) {
var that = this;
console.log(event.target.dataset.message + "这是啥");
var src = event.target.dataset.message;
//图片预览
wx.previewImage({
current: src, // 当前显示图片的http链接
urls: [src] // 需要预览的图片http链接列表
})
}, // 删除照片 &&
imgDelete1: function (e) {
let that = this;
let index = e.currentTarget.dataset.deindex;
let imgbox = this.data.imgbox;
imgbox.splice(index, 1)
that.setData({
imgbox: imgbox
});
},
// 删除照片 &&
imgDelete1: function (e) {
let that = this;
let index = e.currentTarget.dataset.deindex;
let imgbox = this.data.imgbox;
imgbox.splice(index, 1)
that.setData({
imgbox: imgbox
});
},
// 选择图片 &&&
addPic1: function (e) {
var imgbox = this.data.imgbox;
console.log(imgbox)
var that = this;
var n = 2;
if (2 > imgbox.length > 0) {
n = 2 - imgbox.length;
} else if (imgbox.length == 2) {
n = 1;
}
wx.chooseImage({
count: n, // 默认9，设置图片张数
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
// console.log(res.tempFilePaths)
// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
var tempFilePaths = res.tempFilePaths
console.log('路径' + tempFilePaths);
if (imgbox.length == 0) {
imgbox = tempFilePaths
} else if (2 > imgbox.length) {
imgbox = imgbox.concat(tempFilePaths);
}
that.setData({
imgbox: imgbox,
imgnum: imgbox.length
});
}
})
},
//图片
imgbox: function (e) {
this.setData({
imgbox: e.detail.value
})
},
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。