最近專案一直在使用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>

結束語：已經加班一個月了。雖然有點累，但是收穫好多東西~！繼續努力。