[VUE.JS]FileReaderを実装する–ファイル読み込み作成

0

Vue.js上でJavaScriptのweb apiであるFileReaderの使い方です。
サンプルとして画像を読み込む形式で作成しました。
FileReaderの詳細は下記参照
Web API–FileReader–MDN

html部分、ファイル読み込みフォーム解説

画像を選択すると選択した画像が表示されるように実装しています。

<template lang="html">
    <div>
        <div v-if="selectedImageUrl">
            <img :src="selectedImageUrl">
        </div>
        <label>
            <span>ファイル選択</span>
            <input
                type="file"
                @change="changeImg"
            >
            <input type="text" id="imageLoader" disabled=""
                :placeholder="loadedImage ? loadedImage.name : 'ファイルを選択してください'"
            >
        </label>
    </div>
</template>

input type="file"　ファイル読み込みINPUTを設置
selectedImageUrl　読み込まれた画像ファイルがあるとき画像を表示
@change　変更時にchangeImage呼び出し
loadedImage　loadedImage名を表示。無い場合はファイルを選択してくださいを表示

ざっとこんな具合です。

JavaScript部分–FileReader使用部分

今回はData URI Schemeで実装しています。

<script>
export default {
    data: function() {
        return {
            selectedImageUrl: null,
            loadedImage: null,
        }
    },
    methods: {
        changeImage(e) {
            let that = this
            that.loadedImage = e.target.files[0]
            let reader = new FileReader()
            reader.onload = function (e) {
                that.selectedImageUrl = e.target.result;
            }
            reader.readAsDataURL(e.target.files[0]);
        }
    }
}
</script>

new FileReader()でインスタンスを作成します。
FileReader APIは非同期であるため、状態を取得するために使用できるイベントがあります。
ファイルが読み取られたときにデータにアクセスするにはonloadイベントが必要です。
reader.readAsDataURL()でファイルをData URI Schemeで読み込みしています。

簡単ですが、Vue.jsでのFileReader実装方法について書いてみました。

VUE.JSおすすめの書籍

書籍は読む方だと思いますが、やはり現場で実装するとより深く学べるのを実感します。
逆に実装中心だと、より良いコーディングを考えることができなくなるので書籍もあらためて読むことをおすすめします。

これからはじめるVue.js実践入門
JavaScript、Vue.jsの知識がある程度ある方向け

Vue.jsのツボとコツがゼッタイにわかる本
初心者向け

LINEで送る