input上传图片，并且实现FileReader实图片预览效果

最新推荐文章于 2024-04-25 16:09:54 发布

mrzhangdulin

最新推荐文章于 2024-04-25 16:09:54 发布

阅读量200

点赞数

分类专栏： js

js 专栏收录该内容

54 篇文章

订阅专栏

本文详细介绍了如何在Vue.js项目中实现图片上传功能，包括使用input元素触发文件选择，通过FileReader API读取图片并转换为Base64编码，以及在上传过程中处理change事件避免重复选择同一文件的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>