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のツボとコツがゼッタイにわかる本
初心者向け