はじめに

Vue.js で画像プレビューする方法を整理した。

基本的に たった2ステップ！Vue.js で選択画像をプレビューする方法（サンプルDL可） – console dot log の通り。

TL;DR

  • <input type="file"> に @change でイベントハンドラを設定
  • イベントハンドラ内で FileReader の readAsDataURL で data: url として読み込み
  • 読み込み完了したら Vue の data に data: url を設定
  • <img :src="dataUrl>` のようにバインドして表示
この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
    1. 完成コード
    2. 簡単な解説
  5. まとめ
  6. 参考文献

環境・条件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$ sw_vers
ProductName:	Mac OS X
ProductVersion:	10.15.2
BuildVersion:	19C57

$ node -v
v12.7.0

$ npm -v
6.10.3

$ vue -V
3.10.0

$ npm ls vue
vue@2.6.11 | MIT | deps: none | versions: 256

詳細

冒頭にも書いた通り たった2ステップ！Vue.js で選択画像をプレビューする方法（サンプルDL可） – console dot log を参考にしている。

完成コード

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<template>
  <div>
    <div v-if="!dataUrl">
      <label for="image">画像を選択</label>
      <input type="file" id="image" accept="image/*" @change="readImage">
    </div>
    <div v-else>
      <div id="image-preview">
        <span v-if="file.name !== ''">{{ file.name }}</span>
        <img :src="dataUrl" v-if="dataUrl">
      </div>
      <button type="button" @click="resetImage">Reset image</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'setting',
  data() {
    return {
      dataUrl: null,
      file: null,
    };
  },
  methods: {
    readImage() {
      const inputImage = document.getElementById('image');
      if (inputImage.files.length === 0) {
        return;
      }

      this.file = inputImage.files[0];
      const reader = new FileReader();
      reader.onload = (e) => {
        this.dataUrl = e.target.result;
      }
      reader.readAsDataURL(this.file);
    },
    resetImage() {
      this.dataUrl = null;
      this.file = null;
    },
  },
};
</script>

簡単な解説

  • 初期状態では dataUrl が null なのでファイル選択のみ表示
  • 画像を選択すると change イベントが発火し、readImage が動作
  • readImage 内で FileReader を使ってファイル読み込み
    • onload で、読み込み完了したら dataUrl に読み込み結果(data: url)を設定
    • readAsDataURL で data: url として読み込み
  • dataUrl が設定されると v-else 側の画像プレビューに表示が切り替わり
  • <img :src="dataUrl"> で更新された dataUrl をソースとして画像を表示

まとめ

  • <input type="file"> に @change でイベントハンドラを設定
  • イベントハンドラ内で FileReader の readAsDataURL で data: url として読み込み
  • 読み込み完了したら Vue の data に data: url を設定
  • <img :src="dataUrl>` のようにバインドして表示

参考文献

関連記事

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list