vue组件开发之图片上传本地预览组件

最近项目一直在使用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(); 
                //转base64
                reader.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>

结束语：已经加班一个月了。虽然有点累，但是收获好多东西~！继续努力。