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

原创于 2023-08-03 10:57:00 发布 · 260 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #经验分享 #javascript #vue.js

前端同时被 2 个专栏收录

19 篇文章

订阅专栏

17 篇文章

订阅专栏

本文介绍了如何在前端使用FileReaderAPI读取用户上传的文件，将其转换为DataURL，并展示了一个Vue组件示例。重点在于处理文件上传和Base64编码的实现过程。

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