input file type

브라우저에서는 보안상 로컬 파일에 직접 접근 할 수 없다.
input[type=file] 는 브라우저에서 유저가 직접 로컬의 파일을 선택할 수 있게 도와준다.
선택한 파일은 File 로 정의되고 FileList 에 담기게 된다.
이때 multiple 설정 여부와 관계없이 배열 형태로 FileList 로 담긴다.

let file = e.target.files[0];

위의 코드는 선택한 파일을 file에 담는 코드이다 위에서 말했듯이 multiple설정과 상관없이 배열형태로 담기기 때문에 files[0]으로 접근 한다.

let reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onloadend = e => {
      console.log(e.target.result)
    };

이후 FileReader를 사용하여 해당 파일의 path를 알아 낼수 있다.

console.log(file.path) // c://fakePath/selectedFile.png

FileReader를 사용하지 않고 직접 파일의 Path에 접근 하면 위의 결과 처럼 fakePath라고 브라우저는 보여준다.
그렇기 때문에 FileReader를 사용하게 되는데 readAsDataURL로 파일의 경로를 가져오고 파일을 읽는 시간이 필요하기 때문에 비동기 함수인 onloadend를 사용하여 이벤트 타겟의 result에 경로가 담겨오게 된다. 이때 경로는 Base64포맷으로 넘어온다