[Vue.js] 이미지 파일

파일타입은 v-model 디렉티브 사용불가

 

리액티브 데이터와 동기화할때는 change 이벤트를 바인딩 해야함 

 

<div id="app" >
   <input type="file" v-on:change="handleChange">
   <div v-if="preview"><img v-bind:src="preview"></div>
</div>

 

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)
            }
        }
    }
})

 

이미지가 변경되면 화면에 프리뷰를 출력한다. ▼