Vueで画像プレビュー機能を作る

<input>と$refsを使う方法

流れとしては

画像を受け取るのを@changeで監視する
@changeが発火したら$refsから画像を取得してcreateObjectURLでその画像のURLを作る
画像のURLをurlに代入する。
v-bindによって<img>のsrcとurlが対応して、画像が表示される。

です。

ちょっと解説

inputのtypeがfileの時はv-modelを使用することができないので、$refsを介して画像にアクセスする必要があります。
createObjectURLは引数に渡したオブジェクトを表すURLを生成してくれる関数です。
この関数で生成したURLを<img>のsrcに渡すことで画像を表示することができます。

<template>
  <div>
    <img :src="url">
    <input
     type="file"
     accept="image/*"
     @change="uploadImage"
     ref="image"
     >
  </div>
</template>

<script>
export default {
  data(){
    return{
      url:null
    }
  },
  methods:{
    uploadImage:function(){
      this.url = URL.createObjectURL(this.$refs.image.files[0]);
    }
  }
}
</script>

Vuetifyを使う方法

Vuetifyを使うなら$refsを使わなくても、v-file-inputでv-modelが使えるので、Vueライクで簡単にできてしまいます。

<template>
  <div>
    <img :src="url">
    <v-file-input
     v-model="image"
     accept="image/*"
     />
  </div>
</template>

<script>
export default {
  data(){
    return {
      image:null
    }
  },
  computed:{
    url(){
      if(this.image===null){return;}
      else{return URL.createObjectURL(this.image);}
    }
  }
}
</script>