//wxml
<view class="image-list">
<block wx:if="{{imageList.length}}" wx:for="{{imageList}}" wx:key="this">
<view class="envImage">
<image class='envImage-img' src="{{item}}" mode='aspectFill'></image>
<view class="del-container" data-imageindex="{{index}}" bindtap="delImage">
<image class="del-icon" src="/images/del.png"></image>
</view>
</view>
</block>
<view class='chooseImg' wx:if="{{imageList.length < 9}}" bindtap='chooseImg'>
<image src="/images/add.png" class="addIcon"></image>
</view>
</view>
//js
data: {
imageList:[]
},
//选择图片
chooseImg: function() {
var _this = this;
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: function(res) {
const tempFilePaths = res.tempFilePaths
// console.log(tempFilePaths)
wx.uploadFile({
url: app.globalData.uploadUrl,
filePath: tempFilePaths[0],
name: 'file',
header: {
"Content-Type": "multipart/form-data"
},
success(res) {
var data = JSON.parse(res.data);
var imageList = _this.data.imageList;
imageList.push(data.data.url)
_this.setData({
imageList: imageList
})
// console.log("图片",_this.data.imageList)
}
})
}
})
},
//删除图片
delImage:function(e){
var __ = this;
var index = e.currentTarget.dataset.imageindex;
var imageList = __.data.imageList;
wx.showModal({
title: '提示!',
content: '是否删除这张图片?',
success(res){
if(res.confirm) {
imageList.forEach((item,i)=>{
if(i == index) {
imageList.splice(i,1)
__.setData({
imageList: imageList
})
}
})
}
}
})
},
//wxss
.image-list{
margin-top: 20rpx;
}
.image-list::after{
content: '';
display:block;
clear: both;
}
.chooseImg{
width: 200rpx;
height: 160rpx;
background: #e6e6e6;
text-align: center;
float: left;
}
.envImage{
float: left;
width: 200rpx;
height: 160rpx;
margin-right: 20rpx;
margin-bottom:20rpx;
position: relative;
}
.del-container{
height: 40rpx;
width: 100%;
text-align: center;
background: rgba(0, 0, 0, 0.7);
position: absolute;
bottom:0;
}
.del-icon{
width: 30rpx;
height: 30rpx;
}
.envImage-img{
width: 100%;
height: 100%;
}
.addIcon{
width: 55rpx;
height: 55rpx;
margin: 52rpx auto 0;
}