直接上代码 删除没有优化
wxml
<view class="container">
<view class="main">
<view class="title">上传图片</view>
<!-- 点击上传前的页面 -->
<view class="content" bindtap="handleUploadImg">
<text class="plus">+</text>
</view>
<!-- 点击上传后的页面 -->
<view class="selectImg" wx:if="{{imgPreview}}">
<view class="box" wx:for="{{imgPreview}}">
<view class="deleteBox" bindtap="deleteImg" data-item="{{item}}">
<view class="deleteBtn">x</view>
</view>
<image class="img" src="{{item}}" bindtap="previewImg" data-item="{{item}}" />
</view>
</view>
</view>
</view>
wxss
.container {
width: 100%;
}
.main {
display: flex;
padding: 0 16px;
flex-direction: column;
background-color: #fff;
}
.title {
margin: 16px;
}
.content {
width: 80px;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
margin: 16px;
background-color: #eee;
border: 1px dashed #ddd;
border-radius: 4px;
}
.selectImg {
position: relative;
}
.selectImg .img {
width: 80px;
height: 80px;
border-radius: 4px;
overflow: hidden;
object-fit: contain;
margin: 16px;
}
.deleteBox {
position: absolute;
top: 20px;
left: 74px;
width: 16px;
height: 16px;
line-height: 14px;
text-align: center;
border-radius: 50%;
background-color: #a59f99;
}
.deleteBtn {
color: #fff;
}
js
Page({
/**
* 页面的初始数据
*/
data: {
num: 11123213123,
imgPreview: [],
count: 3
},
handleUploadImg: function () {
const that = this
switch (this.data.imgPreview.length) {
case 0:
this.data.count = 3
break
case 1:
this.data.count = 2
break
case 2:
this.data.count = 1
break
}
if (this.data.imgPreview.length != 3) {
console.log(1)
// 从相册或相机拍摄
wx.chooseImage({
count: that.data.count, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], //可以指定是相册还是拍照 默认两者都有
success: (res) => {
console.log('res: ', res);
const previewData = res.tempFilePaths //得到选择图片的网络地址 http://127.0.0.1:3000/.....IMG917.jpeg
for (let i = 0; i < previewData.length; i++) {
that.data.imgPreview.push(previewData[i])
}
that.setData({
imgPreview: that.data.imgPreview
})
}
});
} else {
wx.showToast({
title: '最多只能选三张图片',
icon: 'none',
duration: 2000
})
}
},
// 预览图片
previewImg: function (e) {
let url = e.currentTarget.dataset.item
wx.previewImage({
urls: url, // 图片地址列表
current: 1, //默认显示的图片的地址
success: (res) => {
console.log('预览调用成功');
},
fail: (res) => {
console.log('预览调用失败');
}
});
},
// 删除选中的图片
deleteImg: function (e) {
console.log(e)
let arr = []
for (let i = 0; i < this.data.imgPreview.length; i++) {
if (e.currentTarget.dataset.item != this.data.imgPreview[i]) {
arr.push(this.data.imgPreview[i])
}
}
this.setData({
imgPreview: arr
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
}
})