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

 

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

实现的效果：

具体的css样式可以自行发挥