Vue에서 파일 내용 출력하기

Text 파일을 하나 열어서 해당 파일의 내용을 log로 출력하는 내용입니다.

<template>
    <div>
        <input type="file" @change="onchange">
    </div>
</template>

<script setup>

    // 파일선택시 호출 할 함수
    function onchange(evt){
        // 선택된 파일 객체 가져오기
        let file = evt.target.files[0];
        console.log(file)
        
        // 파일리더 생성해서 read할때 수행할 함수 정의
        let reader = new FileReader();
        reader.onload = function(progressEvt){
            progressEvt; // 이거 없으면 에러나서 그냥 써놓음

            // 읽어온 데이터가 this.result에 담겨있어서 해당 데이터 출력
            console.log(this.result)
        }

        // 파일 읽기 수행
        reader.readAsText(file)
    }
    
</script>