vue图片上传组件，供大家参考，具体内容如下
最近在做项目的时候顺便补充了一下公司项目的公共组件库，刚刚手头事情告一段落，就来做个笔记。
首先来看看最终效果
1.不允许删除
2.允许用户删除（显示删除按钮）
实现的效果就是上图显示内容
接下来说说组件布局那部分直接上代码了
<template>
<div class="uploadImg">
<div class="upload-content">
<div class="upload-title">
<p>{{upTitle}}</p>
<p class="show-num">{{upNum}}/{{uploadNum}}</p>
</div>
<ul class="img-list">
<li class="show-img" v-for="(item, index) in imgList" :key="index">
<img :src="item" alt="">
<kk-icon :class="isDel == true ? '' : 'hide-del'" name="error" color="#FF685D" size="0.4rem" @click.native="delImg(index)"></kk-icon>
</li>
<div class="uploadSec">
<img :src="globalPath+'img/insurance/upload.png'" alt="上传图标">
<input type="file" value="" id="choose" @change='onUpload' multiple>
</div>
</ul>
</div>
</div>
</template>上面代码中的kk-icon是自定义的图标组件，只是多了个接受颜色和大小的功能，你们自己写一个替换就行了。然后动态定义它的class，实现显隐就结束了。
随手贴个样式
<style lang="less" type="text/less" rel="stylesheet/less">
.uploadImg{
text-align: left;
.upload-content{
margin-left: 0.3rem;
.upload-title{
display: flex;
justify-content: space-between;
padding: 0.3rem 0.3rem 0.3rem 0;
.show-num{
color: #c9c9c9;
}
}
.img-list{
display: inline-block;
margin: 0.6rem 0.3rem 0.3rem 0;
.show-img{
position: relative;
display: inline-block;
margin-right: 0.12rem;
height: 1.3rem;
width: 1.3rem;
img{
width: 100%;
height: 100%;
}
.hide-del{
display: none;
}
.yd-icon-error{
position: absolute;
top: 0;
right: 0;
}
}
.uploadSec{
position: relative;
display: inline-block;
width: 1.3rem;
height: 1.3rem;
overflow: hidden;
img{
width: 100%;
