Vue.jsで画像プレビュー機能を実装

はじめに

以前Laravel + AWS S3を用いて、画像アップロード機能を実装しました。
その際、プロフィール画像の変更時に画像のプレビューが見れたらいいなと思いましたので今回はプレビュー機能を実装していきます。

せっかくなので、Vue.jsで実装してみようと思います。まだVue.jsはほぼ知識がないので勉強しながら実装していきます。

バージョン

・Laravel：7.20.0
・Vue.js 2.5.17

流れ

大まかな流れは以下の通り

• Vueファイルの作成
• 処理の実装
• コンポーネントの登録

開発

まずは、プレビュー用のVueファイルを作成します。
resources/js/components配下で新規作成します。

処理はこちらになります。

ImagePreviewComponent.vue

<template>
    <div>
        <div>
            <input type="file" name="avatar" ref="preview" v-on:change="show">
        </div>
        <div class="preview-box" v-if="url">
            <img class="image-preview" v-bind:src="url">
        </div>
    </div>
</template>

<script>
export default {
    name: "ProfileImagePreviewComponent",

    data() {
        return {
            url:""
        }
    },
    methods: {
        show() {
            const file = this.$refs.preview.files[0];
            this.url = URL.createObjectURL(file);
        }
    }
}
</script>

解説

<input type="file" name="avatar" ref="preview" v-on:change="show">

ref属性を設定することで、設定した要素（今回であればinput要素）のファイル情報を動的に取得することが出来る。

取得したい要素にrefを設定し、$refsを用いて取得することが出来る。
取得方法としては、$refs.[ref属性で付けた名前]でその要素にアクセスできる。
今回は、input要素のファイル情報を取得したいため下記のように記載する。

methods: {
    show() {
        const file = this.$refs.preview.files[0];
        this.url = URL.createObjectURL(file);
    }
}

URL.createObjectURL()とは？

URL.createObjectURL() 静的メソッドは、引数で指定されたオブジェクトを表す URL を含む DOMString を生成します。 URL の寿命は、それを作成したウィンドウ内の document と結び付けられています。 新しいオブジェクト URL は、指定された File オブジェクトか Blob オブジェクトを表します。
参考：URL.createObjectURL()- MDN Web Docs

つまり、引数で指定したオブジェクトの一時的なURLを作成する処理。
一時的なため、別ページに遷移するなどしてアンロードすれば無効となる。

URL.createObjectURL()で一時的なURLを生成し、imgタグで表示させてあげることでプレビュー機能が出来るということ。

v-onディレクティブで、ファイルを選択した際にshow()メソッドでファイルのURLを生成する！

参考
・URL.createObjectURL() - オブジェクトのURLを作成する
・HTMLElement：イベントの変更

---

<div class="preview-box" v-if="url">
    <img class="image-preview" v-bind:src="url">
</div>

v-ifディレクティブで、URLがある場合のみプレビューを表示させる。

完成イメージ

表示写真はお好みで、CSSを記載してあげるといいかと思います。
（※この写真は、学生時代に3Dプリンターで作った人工筋肉用の部品です）

まとめ

今回は、Vue.jsを用いて画像のプレビュー機能実装についてご紹介しました。
Vue.jsでなくてももちろん実装できますが、比較的簡単なためVue.jsでの学習の第一歩としておすすめです。