HTML部分
<view>
<view class="title">图片上传</view>
<view class="picture">
<view class="item" bindtap='upload' wx:for="{{img}}" wx:key="{{index}}">
<image src="{{item}}"></image>
<image src="/images/cl.png" class="del" wx:if="{{item!='/images/icon_picture.png'}}" data-index="{{index}}" catchtap='del'></image>
</view>
</view>
</view>
CSS部分
.title {
font-size: 30rpx;
padding: 0 40rpx;
margin-bottom: 20rpx;
}
.picture {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.picture .item {
margin: 10rpx 50rpx;
position: relative;
}
.picture .item .del {
width: 21px;
height: 21px;
position: absolute;
right: -9px;
top: -9px;
}
.picture .item image {
width: 72px;
height: 74px;
}
JS部分
// pages/fileUp/fileUp.js
Page({
data: {
img: ['/images/icon_picture.png'],
imgArray:[]
},
upload:function(){
let _vm=this;
let length = this.data.imgArray.length;
let count=6-length;
if(count>0){
wx.chooseImage({
count: count,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success(res) {
let tempFilePaths = res.tempFilePaths;
_vm.setData({
imgArray: _vm.data.imgArray.concat(tempFilePaths)
});
if (_vm.data.imgArray.length<6){
let place = ['/images/icon_picture.png']
let newArray = _vm.data.imgArray.concat(place);
_vm.setData({
img: newArray
})
}else{
_vm.setData({
img: _vm.data.imgArray
})}}
})
}else{
wx.showToast({
title:'图片最多可以上传6张'
})}
},
del:function(e){
let _vm=this;
let index = e.currentTarget.dataset.index;
let str = _vm.data.imgArray[index];
let newArray = _vm.data.imgArray.filter(function (value, index, array) {
return value != str;
});
_vm.setData({
imgArray: newArray
})
if (_vm.data.imgArray.length < 6) {
let place = ['/images/icon_picture.png']
_vm.setData({
img: _vm.data.imgArray.concat(place)
})}}
})
最后效果展示：