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">
      </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));	
	            }
	    }
	}