はじめに

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

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

TL;DR

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

目次

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

簡単な解説

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

まとめ

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

参考文献

関連記事