FileReader初步使用实现上传图片预览效果

FileReader初步使用实现上传图片预览效果

技术杂谈小彩虹2021-07-08 1:00:2660A+A-

FileReader 作为文件处理读取器现在用处相对多一些。初次使用作为上传预览实例

  • 首先要有input 和img
<img :src="upImg" alt=""> //属性绑定为upImg在data()中声名
<input class="lost" type="file" id="file" @change="upLoadImg($event)" ref="file">

属性有点多因为我这个是vue的项目所以有用到ref,jq的话就可以直接用id 来查找元素进行事件的绑定和更改

  • 然后写绑定的事件来更新视图的img
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事件重复选择同一文件是不能重新渲染载入事件
            }
        }

这样fileReader就将img读取为base64的编码,这个跟在初始化vue项目后在本地加载图片是想要直接在img标签中引用,是需要在script中进行require就是将其转化为base64的编码再有vue渲染到img的src中的.

ps:input file 不能任意更改样式这是很郁闷的,所以更新思路来解决

  • 所以我们们首先要隐藏input file 将其display设为none
 <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>

这样将input file的点击事件帮给了 .upload

这样我们就可以愉快的上传了,去试试,可以做到图片预览了没,最后还是最好把图片的样式给规定下,太大的站位会影响整体布局的.

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1

联系我们