javascript csv file 읽기

1.1. 아래와 같이 버튼을 만들고 클릭 시 input: file태그가 클릭되게 함

 

1.2. input: file 태그에 onChange event를 걸어서 파일 선택 완료 시 원하는 함수 실행

 

<button>
	<input type="file" hidden />
</button>

 

 

 

 

2.1. 아래(예시)처럼 이벤트 함수를 실행했을 때 매개변수로 넘어오는 event를 이용해 사용자가 선택한 file을 변수에 저장함

 

onChange: async function(event) {
    let file = event.target.files[0];

    .
    .
    .
}

 

 

2.2. 저장한 file을 console.log로 확인했을 때 아래 같이 나옴

 

 

 

 

 

3.1. FileReader를 이용해 파일을 읽었으며, 비동기로 데이터를 읽기 때문에 Promise로 생성하여 진행함.

 

onChange: async function(event) {
    let file = event.target.files[0];

    let readFile = (file) => new Promise( (resolve, reject) => {
        let reader = new FileReader();
        reader.onload = (e) => resolve(reader.result);
        
        reader.readAsText(file);
    });

    let csvText = await readFile(file);
}

 

 

3.2. csvText 변수에 읽은 csv파일의 내용을 저장 후 파싱하여 사용함.

 

// 파싱 예
let csvList = csvText.split('\r\n');