图片文件上传并展示（fileReader）

<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>

MDN FileReader

CSDN FileReader

Data URL