The finished product is as follows
This article mainly describes the implementation of the selection picture function.
Principle :
// html
<view class="chooseImageBox">
<!-- 渲染已选择图片 -->
<block wx:for="{
{photo}}" wx:key="photoIndex">
<view class="beChoosen_ImageBox">
<image class="beChoosen_Image" src="{
{item.tempFilePath}}" bindtap="preViewImage" data-index="{
{index}}" mode="aspectFill"></image>
<view class="del_beChoosen_Image" bindtap="del_beChoosen_Image" data-index="{
{index}}">×</view>
</view>
</block>
<!-- 点击选择图片 -->
<view class="chooseImage" bindtap="chooseImage">
<image src="./images/jia.png"></image>
</view>
</view>
Before the user selects a picture, the variable photo is an empty array. After the user selects an image, save the image cache address into a variable to render the selected image. and select the picture button to move back.
In addition, there are picture preview function and picture deletion function, the principle will not be repeated.
If there is something you don't understand in the code, you can ask questions in the comment area.
All codes are as follows:
// 点击事件 - 选择图片
chooseImage(){
let that = this;
wx.chooseMedia({
// 上传图片
count: 6,
mediaType:'image',
sourceType:['album','camera'],
sizeType: ['original', 'compressed'], // 可选择原图、压缩图
success: (res) => {
let photo = that.data.photo.concat(res.tempFiles);
wx.getImageInfo({
// 获得图片信息
src: photo[0].tempFilePath,
success: (res) => {
photo[0].imageHeight = res.height;
photo[0].imageWidth = res.width;
that.setData({
photo })
}
})
}
})
},
// 点击事件 - 删除图片
del_beChoosen_Image(e) {
let index = e.target.dataset.index; // 照片索引值
let photo = this.data.photo.slice();
photo.splice(index,1); // 注意：splice返回值是删除的元素, 并改变原数组
this.setData({
photo });
},
// 点击已选图片 - 进行预览
preViewImage(e) {
let urls = this.data.photo.map(item => {
return item.tempFilePath
});
let index = e.target.dataset.index;
wx.previewImage({
urls: urls,
current: urls[index]
})
},
// css
.chooseImageBox {
display: flex;
flex-direction: row;
align-items: center;
}
.beChoosen_ImageBox {
display: inline-block;
position: relative;
width: 150rpx;
height: 150rpx;
margin-right: 20rpx;
}
.beChoosen_Image {
width: 150rpx;
height: 150rpx;
border-radius: 15rpx;
}
.del_beChoosen_Image {
position: absolute;
top: 5rpx;
right: 5rpx;
display: flex;
justify-content: center;
align-items: center;
width: 25rpx;
height: 25rpx;
border-radius: 50%;
background-color: rgb(10, 10, 10,0.3);
font-size: 25rpx;
color: #fff;
}
.chooseImage {
width: 150rpx;
height: 150rpx;
background-color: rgb(245, 245, 245);
border-radius: 15rpx;
display: inline-flex;
justify-content: center;
align-items: center;
}
.chooseImage image {
display: inline-block;
width: 60rpx;
height: 60rpx;
}