vue图片上传并在页面显示

组件代码

    <div id="wrapper">
            <h1>请上传文件</h1>
            <div class="upload-btn common mb_10" v-if="!isShow">
                <label>
                    <input type="file" @change="uploadImg">
                </label>
            </div>
            <div class="img-list-item common mb_10" v-if="isShow">
                <img :src="src" class="common">
                <i class="del-img" @click="forkImage"></i>
            </div>
        </div>

方法

      export default {
     
            data () {
     
                return  {
     
                    src: '',
                    isShow:false,
                }
            },
            methods: {
     
                uploadImg (e) {
     
                    let _this = this;
                    let files = e.target.files[0];
                    if (!e || !window.FileReader) return; // 看支持不支持FileReader
                    let reader = new FileReader();
                    reader.readAsDataURL(files); // 这里是最关键的一步，转换就在这里
                    reader.onloadend = function () {
     
                        _this.src = this.result;
                        _this.isShow = true;
                    }
                },
        
                forkImage () {
     
                    this.src = '';
                    this.isShow = false;
                }
            }
        }

样式

    .common {
     
            width: 148px;
            height: 148px;
            border: 1px solid #d8d8d9;
        }
        .img-list-item {
     
            position: relative;
            margin: auto;
        }
        .img-list-item img {
     
            box-sizing: border-box;
            vertical-align: middle;
            border: 0;       
        }
        .img-list-item i.del-img {
     
            width: 15px;
            height: 15px;
            display: inline-block;
            background: rgba(0,0,0,.6);
            background-image: url(../assets/white-close.png);
            background-size: 10px;
            background-repeat: no-repeat;
            background-position: 50%;
            position: absolute;
            top: 0;
            right: 0;
        }
        .upload-btn {
     
            background: url('../assets/upload-btn-add.png') no-repeat 50%;
            margin: auto;
        }
        input[type="file"] {
     
            color: transparent;
            opacity: 0;
            width: 100%;
            height: 100%;
        }
        #wrapper:after {
     
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        .mb_10 {
     
            margin-bottom: 10px; 
        }