一、实现功能
1、上传一张或多张图片（最多四张）
2、图片可点击预览放大
3、点击图片右上角可删除图片
二、实现方式
使用colorUI组件库，在微信小程序的全局样式中引入colorUI组件库的通用样式表和
通用样式表下载地址/download/weixin_40677985/11541901
或者colorUI组件库的官网下载/（官网有具体的使用文档）
三、代码的实现
注意：我用的是uni-app框架写的微信小程序，用原生的朋友请自行修改写法。
1、html的代码
-
<view class="cu-bar bg-white margin-top">
-
<view class="action">
-
图片上传(选填)
-
</view>
-
<view class="action">
-
{{imgList.length}}/4
-
</view>
-
</view>
-
<view class="cu-form-group">
-
<view class="grid col-4 grid-square flex-sub">
-
<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
-
<image :src="imgList[index]" mode="aspectFill"></image>
-
<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
-
<text class='cuIcon-close'></text>
-
</view>
-
</view>
-
<view class="solids" @tap="ChooseImage" v-if="<4">
-
<text class='cuIcon-cameraadd'></text>
-
</view>
-
</view>
-
</view>
2、js的代码
-
<script>
-
export default {
-
data() {
-
return {
-
imgList: [],
-
modalName: null,
-
index:-1,
-
}
-
},
-
methods: {
-
//选择图片
-
ChooseImage() {
-
({
-
count: 4, //默认9
-
sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
-
sourceType: ['album','camera'], //从相册选择
-
success: (res) => {
-
if (.length != 0) {
-
= ()
-
} else {
-
=
-
}
-
}
-
});
-
},
-
//预览图片
-
ViewImage(e) {
-
({
-
urls: ,
-
current:
-
});
-
},
-
//删除图片
-
DelImg(e) {
-
({
-
title: '删除照片',
-
content: '确定要删除这张照片吗？',
-
cancelText: '取消',
-
confirmText: '确定',
-
success: res => {
-
if () {
-
(.index, 1)
-
}
-
}
-
})
-
}
-
-
}
-
}
-
</script>
四、实现的效果
