input img
<img :src="upImg" alt=""> //属性绑定为upImg在data()中声名
<input class="lost" type="file" id="file" @change="upLoadImg($event)" ref="file">
绑定事件
upLoadImg(e) {
let that = e.target //保存当前的input元素
let fr = new FileReader() //初始化
fr.readAsDataURL(e.target.files[0]) //选择文件中的头一个开始读取,将img读取为base64编码可以被img直接解析
fr.onload = e => { //在filereader中读取完毕开始异步加载
this.upImg = e.target.result
that.value = null //解决change事件重复选择同一文件是不能重新渲染载入事件
}
}
input 样式
<span @click="upLoadClick($event)" class="upload">
哪里不会点这里
<input class="lost" type="file" id="file" @change="upLoadImg($event)" ref="file">
</span>
<script>
upLoadClick(e) {
e.click = this.$refs.file.click()
console.log(this.$refs);
},
</script>
<style lang='stylus' scoped>
.lost //stylus 就是这么省略...
display none
</style>