<div class="upload">
    // 顯示圖片的地方 一開始隱藏，上傳后顯示
    <div class="show" v-bind:class="{showpic: is_show_pic}">
        // 圖片的 src 綁定在 vue data 里
        <img style="text-align:center" :src="src" width="100px">
        <span class="delete-pic" @click="delete_pic">x</span>
    </div>
    
    // input是沒有大小的，直接點(diǎn)擊label觸發(fā)
    <input @change="show_pic" type="file" id="file" class="inputfile" accept="image/png, image/jpeg, image/jpg" />

    // 點(diǎn)擊上傳圖片 上傳后隱藏這個(gè)label
    <label :class="{hide: isHide}" for="file" class='file-label'>上傳頭像</label>
</div>

show_pic(e) {
    f = e.target.files[0]
    var reads= new FileReader();
    reads.readAsDataURL(f);

    let that = this
    reads.onload=function (e) {

        // 將圖片賦值給 vue data 里的 src 用以渲染到頁(yè)面上 
        that.src=this.result;
        
        
    };
    this.is_show_pic = true
    this.isHide = true
},

// 刪除已經(jīng)上傳的圖片
delete_pic() {
    // 但是只是清空了 vue data 的數(shù)據(jù)
    // 如果現(xiàn)在再次上傳圖片show_pic函數(shù)就進(jìn)不去，除非重新刷新，
    // 看上去好像是應(yīng)該把input里的file也一起清空？
    // 但是這是只讀屬性操作不了
    // 這里應(yīng)該怎么做呢
    this.src = ''
},