はなちるのマイノート

Unityをメインとした技術ブログ。自分らしくまったりやっていきたいと思いますー!

【Vue.js】画像ファイルをバインディングする

はじめに

今回は画像ファイルをバインディングする方法についての記事になります!

フォームの入力といえば私はまず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)
            }
        }
    }
})

f:id:hanaaaaaachiru:20190729232319p:plain

さいごに

これで画像ファイルを扱うことができました。

是非上手く活用してみてください!