在vue 中使用input type=file 获取上传图片，并转为base64码放在img 的src中，实现预览效果

<!--页面部分-->
<template>
<div class="hello">
<p class="title">{{ action }}</p>
<p class="selectfile">请选择预览图片</p>
<input class="select" ref="imgInput" type="file" accept="image/*" @change="uploadImg($event)">

<ul v-show="isUpload">
<p class="green" v-if="imgUrl.length!==0">图片预览</p>
<li v-for="(list,index) in imgUrl" :key="list">
<img ref="imgimg" :src="list.url" alt="">
<button class="remove" @click="remove(index)">删除</button>
</li>
</ul>
</div>
</template>

<!--js部分-->
<script>
export default {
name: 'Home',
data () {
return {
action: 'Welcome to my album !',
isUpload:false,
imgUrl:[],
}
},
methods: {
uploadImg(e){
console.log(e.target.files);
this.isUpload=true;
let file=e.target.files[0];
let url='';
var reader = new FileReader();
reader.readAsDataURL(file);
let that=this;
reader.onload = function (e) {
url=this.result.substring(this.result.indexOf(',')+1);
// that.imgUrl='data:image/png;base64,'+url
// that.$refs['imgimg'].setAttribute('src','data:image/png;base64,'+url);
that.imgUrl.push({
id:that.imgUrl.length+1,
url:'data:image/png;base64,'+url
})
}
},
remove(index){
this.imgUrl.splice(index,1)
}
},
}
</script>

<!--样式部分-->
<style scoped>
.green{
color: #42b983
}
ul {
list-style-type: none;
padding: 0;
}
img{
width: 400px;
}
.title{
font-size: 40px;
background: linear-gradient(to right, red, blue);
-webkit-background-clip: text;
color: transparent;
font-weight: 800
}
.remove{
position: relative;
bottom: 120px;
left: 70px;
border-radius: 4px;
background-color: darkred;
border: 1px solid gray;
color: white;
width: 50px;
height: 25px;
text-align: center
}
.select{
opacity:0;
z-index: 111;
position: relative;
top: -50px;
left: 0%;
height: 50px;
width: 163px;
}
.selectfile{
color: white;
padding: 10px 20px;
width: 120px;
background-color: #4180d6;
z-index: 1;
margin: 0 auto;
border-radius: 4px;
}
</style>

效果展示图