File example for preview of images before upload

previewImage.vue

<template>
  <div>
    <input ref="inputFile" type="file" accept="image/*" hidden @change="upload">
    <button @click="openInputFile">Upload</button>
    <div>
      <div v-show="view">
        <img id="imgFile" style="width: 600px; height: 400px" />
        <button @click="cleanInputFile"><i>&times;</i></button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data: () => ({
    view: false
  }),
  methods: {
    openInputFile() {
      this.$refs.inputFile.click();
    },
    upload(event) {
      const file = event.target.files[0];

      const preview = document.getElementById("imgFile");

      const fr = new FileReader();

      fr.onload = e => preview.src = e.target.result;
      fr.readAsDataURL(file)
      
      this.view = true;
    },
    cleanInputFile() {
      this.view = false;

      const preview = document.getElementById("imgFile");

      const fr = new FileReader();

      fr.onload = () => preview.src = "";
    },
  }
}
</script>