最近项目一直在使用vue，以前只是用vue做过一些简单的demo对数据进行增删改，并没有用于实际开发项目，。今天就想了一下如何用vue实现常见的图片上传前本地预览效果。
效果预览：
<template><div class="image-view"><div class="addbox"><input type="file" @change="getImgBase()"><div class="addbtn">+</div></div><div class="view"><div class="item" v-for="(item, index) in imgBase64"><span class="cancel-btn" @click="delImg(index)">x</span><img :src="item"></div></div></div></template><script>export default {name: 'imageView',data (){return {imgBase64:[] //存储img base64的值将值传给后端处理}},methods: {//获取图片base64实现预览getImgBase(){var _this = this;var event = event || window.event;var file = event.target.files[0];var reader = new FileReader(); //转base64reader.onload = function(e) {_this.imgBase64.push(e.target.result);}reader.readAsDataURL(file);},//删除图片delImg(index){this.imgBase64.splice(index,1);}}}</script><style scoped>*{margin:0 auto;padding:0;font-family:"微软雅黑";}.clearboth::after{content:"";display:block;clear:both;}.image-view{width:400px;height:300px;margin:50px auto;}.image-view .addbox{float:left;position:relative;height:100px;width:100px;margin-bottom:20px;text-align:center;}.image-view .addbox input{position:absolute;left:0;height:100px;width:100px;opacity:0;}.image-view .addbox .addbtn{float:left;height:100px;width:100px;line-height:100px;color:#fff;font-size:40px;background:#ccc;border-radius:10px;}.image-view .item {position:relative;float:left;height:100px;width:100px;margin:10px 10px 0 0;}.image-view .item .cancel-btn{position:absolute;right:0;top:0;display:block;width:20px;height:20px;color:#fff;line-height:20px;text-align:center;background:red;border-radius:10px;cursor:pointer;}.image-view .item img{width:100%;height:100%;}.image-view .view{clear:both;}</style>
结束语：已经加班一个月了。虽然有点累，但是收获好多东西~！继续努力。
