一篇文章介绍FileReader图片本地预览

FileReader介绍

FileReader是一种异步读取文件机制

new FileReader()

文件读取成功时触发的回调函数

.onload ()

将读取到的文件编码成DataURL

.readAsDataURL()

代码实现

<template>
 <h1>FileReader图片本地预览</h1>
 <img :src="imgUrl" :style="{width:'200px'}" alt="">
 <input type="file" @change="fn">
</template>
​
<script setup >
import {ref} from 'vue'
​
let imgUrl = ref('')
const fn=(e)=>{
    console.log(e.target.files[0]);
    let reader = new FileReader()
​
     // 将读取到的文件编码成DataURL
    reader.readAsDataURL(e.target.files[0])

    // 读取成功时触发
    reader.onload = ()=>{
        imgUrl.value = reader.result
    }
}
</script>
<style scoped lang='less'>
</style>

结果显示