vue简单制作图片上传功能

1. 样式

.iul-img{
width:100%;
height:100%;
}
.idcard-ul{
display:flex;
}
.iu-item,.iu-img{
width:250px;
height:250px;
border:1px solid #000;
display:inline-flex;
align-items:center;
position:relative;
justify-content:center;
overflow:hidden;
border-radius:10px;
margin:20px 20px 20px 0;
}
.iu-img{
opacity:0.5;
}
.add-img{
font-size:100px;
}
.upload{
position:absolute;
left:0;
right:0;
bottom:0;
top:0;
width:100%;
height:100%;
margin:0;
padding:0;
z-index:999;
opacity:0;
}

2.html

<ul class="idcard-ul">
<li v-if="imgs.length>0" v-for='(item ,index ) in imgs' class="iu-item">
<img :src="item" class="iul-img">
</li>
<li style="position:relative" v-if="imgs.length>=3 ? false : true" class="iu-img">
<span class="add-img">+</span><input class="upload" @change='add_img'  type="file" accept="image/*">
</li>
</ul>

3.js

data:{
imgs:[]
},
methods:{
add_img(event){
let imgData=event.target.files[0];
if(imgData.name){
this.imgs.push(window.URL.createObjectURL(imgData));
}
}
}