项目中需要用户上传图片，需要实现，上传按钮默认为一个，在上传一张图片之后，自动增加一个上传按钮，上传三张图片后按钮消失。
实现思路：
1、图片路径存储在一个数组中，增加和删除图片是对数组进行操作；
2、仅一个按钮，添加计数器，num=1;当num==3时，设置按钮隐藏。
直接上代码：
.wxml文件：
<view class=‘uploader‘ wx:for="{{files}}" wx:key="{{index}}">
<image src=‘../../img/cha.png‘ class=‘cha‘ catchtap=‘delete‘ data-index="{{index}}"></image>
<image src=‘{{item}}‘ class=‘upload-img‘ ></image>
</view>
<view class=‘uploader‘ wx:if="{{upload}}" bindtap="previewImage">
<view class=‘uploader-content‘>
<view class=‘add-icon‘>+</view>
<view class=‘title‘>添加图片</view>
</view>
</view>.wxss代码：
.uploader{
position: relative;
width: 175rpx;
height: 175rpx;
background: #F0F0F2;
margin-top:50rpx;
border-radius:10rpx;
float: left;
margin-right:20rpx;
}
.add-icon{
position: absolute;
font-size:105rpx;
top:-23rpx;
left:50rpx;
color: #A3A3A3;
}
.title{
position:absolute;
bottom:30rpx;
left:32rpx;
color:#A3A3A3;
font-size:31rpx;
}
.upload-img{
width: 100%;
height: 100%;
border-radius: 8rpx;
}
.cha{
z-index:3;
width:30rpx;
height:30rpx;
position:absolute;
right:0;
}.js代码：
Page({
/**
* 页面的初始数据
*/
data: {
upload: true,
files: [],
sum: 0,
},
// 上传图片
previewImage: function () {
wx.chooseImage({
count: 1,
sizeType: [‘compressed‘], // 可以指定是原图还是压缩图，默认二者都有
sourceType: [‘album‘, ‘camera‘], // 可以指定来源是相册还是相机，默认二者都有
success: (res) => {
console.log(res) // 打印输出返回值
let files = this.data.files
files.push(res.tempFilePaths[0]) // 把图片地址push到数组中
let sum = this.data.sum
sum++ // 开始计数
this.setData({
sum: sum
})
if (this.data.sum == 3) { // 如果sum==3隐藏上传按钮
this.setData({
upload: false
})
}
// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
this.setData({
files: files
});
}
})
},
// 删除图片
delete: function (e) {
let index = e.currentTarget.dataset.index
let files = this.data.files
files.splice(index, 1)
this.setData({
files: files
})
if (this.data.files.length == 0) {
this.setData({
upload: true,
sum: 0
})
}
}
})