[vue,javascript]input image file 올릴 시 preview 띄우기

게시판에 글 등록시 image 파일을 올리면 preview가 즉시 띄워지도록 구현해야함

data() {
    return {
        notice: {}
    }
},
methods: {
    readImg(file) {
        const files = $(`#${file}`)[0].files[0];
        const reader = new FileReader();

        reader.readAsDataURL(files);

        reader.onload = (event) => {
            if (file == 'banner_img') {
                this.notice.Banner = event.target.result;
            } else if (file == 'thumbnail_img') {
                this.notice.ThumbnailPath = event.target.result;
            } else {
                this.notice.ImagePath = event.target.result;
            }

        }
    }
}

나는 image를 추가하는 input이 총 3개라 readImg 함수에 file을 인수로 넣어주고 file별로 target을 다르게 설정해줌

 

 <div class="">
    <input type="file" id="banner_img" class="" accept="image/png, image/jpeg, .jpe" @change="readImg('banner_img')" />
    <div class="">
        <div class="" v-if="notice.Banner != null">
            <img id="" v-bind:src="notice.Banner">
        </div>
    </div>
</div>

 

적용 할 때는 input change이벤트로 readImg('fileid값')을 넣어주고 img는 notice의 Banner값이 null이 아닐때 Banner의 value를 bind 해준다