[Vue.js]input fileで選択した画像のプレビューを表示する

Vue.jsでinput type="file"で選択した画像プレビューを表示

Example1

サンプル

<template>
  <div>
     <input type="file" ref="file" @change="setImage"/>
     <img :src="data.image">
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: {
        image: "",
        name: "",
      }
    };
  },
  methods: {
    setImage(e) {
      const files = this.$refs.file;
      const fileImg = files.files[0];
      if (fileImg.type.startsWith("image/")) {
        this.data.image = window.URL.createObjectURL(fileImg);
        this.data.name = fileImg.name;
        this.data.type = fileImg.type;
      }
    },
    
  }
};
</script>

初めに、 <input type="file" ref="file" />でref=で適当に名前をつけてあげます。
そして@changeで画像の選択時にsetImageを発火させています。
this.$refs.fileで画像のようなdomが参照できるのでそこから画像dataをひっぱって来るようにしています。

最後に、window.URL.createObjectURL(file)でsrcに指定するURLを生成しています。
こんな感じでプレビューを表示させてあげれます。

Example2

先ほどはthis.$refs.を使った方法になりますが、eventをとってきてやる方法でもいいかな？

<template>
  <div>
     <input type="file" @change="setImage($event)"/>
     <img :src="data.image">
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: {
        text: "",
        image: "",
        name: "",
      }
    };
  },
  methods: {
    setImage(event) {
      const file = (e.target.files || e.dataTransfer)[0]
      if (file.type.startsWith("image/")) {
        this.data.image = window.URL.createObjectURL(file);
        this.data.name = file.name;
        this.data.type = file.type;
      }
    },
    
  }
};
</script>

最後に

もっと簡単な方法があればご教授ください。
ありがとうございました。