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

Vue.js上でJavaScriptのweb apiであるFileReaderの使い方です。

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

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

sql

<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　読み込まれた画像ファイルがあるとき画像を表示

loadedImage　loadedImage名を表示。無い場合はファイルを選択してくださいを表示

JavaScript部分--FileReader使用部分

javascript

<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おすすめの書籍

書籍は読む方だと思いますが、やはり現場で実装するとより深く学べるのを実感します。

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

JavaScript、Vue.jsの知識がある程度ある方向け

📦

Amazon で関連書籍・ツールを検索

Vue.js フロントエンド入門

Amazonで探す →（アソシエイトリンク）