はじめに
今回は画像ファイルをバインディングする方法についての記事になります!
フォームの入力といえば私はまずv-model
ディレクティブが思いつのではないでしょうか。
ただ画像ファイルの場合にはこれを用いることはできません。
その対処法について触れたいと思います。
やり方
HTML側
<input type="file" v-on:change="handleChange"> <div v-if="preview"><img v-bind:src="preview"></div>
JavaScript側
var app = new Vue({ el: "#app", data: { preview: '', }, methods: { handleChange: function(event){ var file = event.target.files[0] if(file && file.type.match(/^image\/(png|jpeg)$/)){ this.preview = window.URL.createObjectURL(file) } } } })
さいごに
これで画像ファイルを扱うことができました。
是非上手く活用してみてください!