图片的预览

  • template处
<div class="preview" @click="handleClick()">
    <img :src="course.cover" class="course-cover" v-if="!show" />
    <div class="icon-plus">
        <img src="../assets/plus.png"  v-if="show" />
    </div>
     <input type="file" @change="getFile($event)" style="display: none;" id="coverFile" />
</div>
  • methods处
//点击图片预览区，即模拟点击文件选择组件
            handleClick: function() {
                document.getElementById('coverFile').click();
            },
            //图片预览
            getFile: function() {
                this.file = event.target.files[0];
                var windowURL = window.URL || window.webkitURL;
                this.course.cover = windowURL.createObjectURL(this.file);
                this.show = false;
            }

  • 运行效果


©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容