vue实现input file上传图片显示预览图

山羊AM

于 2020-03-11 09:41:01 发布

阅读量5.5k

点赞数 7

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/m0_37603385/article/details/104789880

版权

前端专栏收录该内容

28 篇文章

订阅专栏

本文介绍了一种使用Vue.js实现图片上传并实时预览的方法。通过点击上传区域触发文件选择，利用FileReader读取图片文件，并将其转换为Base64格式的URL，从而在页面上展示所选图片。此外，还提供了隐藏的input元素用于实际的文件选择操作。

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

<template>
  <div>
    <input v-show="false" type="file" accept="image/*" @change="tirggerFile($event)" ref="input" />
    <div style="width:200px;height:200px;border:1px solid;text-align:center;" @click="openImg">
      <span v-if="imgUrl==''">点击上传</span>
      <img style="height:100%;width:100%;" v-if="imgUrl!=''" :src="imgUrl" />
    </div>
  </div>
</template>

export default {
  data() {
    return {
      isSelectFile: false,
      imgUrl: ""
    };
  },
  methods: {
    tirggerFile: function(event) {
      let file = event.target.files[0];
      let url = "";
      var reader = new FileReader();
      reader.readAsDataURL(file);
      let that = this;
      reader.onload = function(e) {
        url = this.result.substring(this.result.indexOf(",") + 1);
        that.imgUrl = "data:image/png;base64," + url;
        // that.$refs['imgimg'].setAttribute('src','data:image/png;base64,'+url);
      };
    },
    openImg() {
      this.$refs.input.click();
    }
  }
};
</script>