[vue.js] 업로드 된 이미지 파일 미리보기 기능구현

보여줄 공간을 정해놓고, data()의 변수인 uploadImageFile을 바인딩 시킨다.

<img class="popupImageItem" :src="uploadImageFile">

선택한 파일과 파일내용이 존재하면 그 파일을 읽어서 this.uploadImageFile 변수에 할당한다.

  onFileSelected(event){
     var input = event.target;
     if (input.files && input.files[0]) {              
         var reader = new FileReader();
         reader.onload = (e) => {
                 this.uploadImageFile = e.target.result;
         }             
         reader.readAsDataURL(input.files[0]);
     }
 },