<template>
<div id="app">
<input type="file" ref="inputfile" @change="fileChange" />
<img :src="imgUrl" >
</div>
</template>
<script>
export default {
data() {
return {
imgUrl: "",
};
},
methods: {
fileChange(res) {
const file = res.target.files[0]; // 获取上传文件
const reader = new FileReader(); // 创建fileReader 对象
reader.readAsDataURL(file) // 读取文件内容,结果用data:url的字符串形式表示
// readAsDataURL 方法会读取指定的 Blob 或 File 对象。并生成data URl(base64编码)
reader.onloadend = (e) => {
console.log('onloadend', e)
this.imgUrl = e.target.result // imgurl赋值dataurl
}
},
},
};
</script>