한동안 프로젝트를 하느라 정신이 없어 포스팅을 오랜만에 쓰는 것 같다🤔
input tag를 통해서 이미지를 업로드 할 시 화면에 해당 이미지가 화면에 표기되도록 직접 작업해보면서 궁금했던 사항을 공부하였다. 공부하다 binary 데이터를 어떻게 JavaScript로 다뤄야 할지에 대해 많이 알게 된 것 같았다. 관련하여 알게된 사실들은 정리하여 추후 포스팅 해야겠다
구현 코드
// index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
</style>
<body>
<div>
<input type="file" id="input"></input>
</div>
<div>
<img src="" / id='previewImg' style="max-width: 200px;">
</div>
<script>
document.getElementById('input').addEventListener('change', (e) => {
const fileReader = new FileReader(); // File 을 읽기 위한 FileReader 객체 생성
fileReader.readAsDataURL(e.target.files[0]); // Blob -> base64 data로 변환
// 파일 읽기가 완료되었을 때 실행되는 이벤트 핸들러
fileReader.onload = (e) => {
let base64data = fileReader.result;
document.getElementById('previewImg').src = base64data;
}
}
)
</script>
</body>
</html>
코드 설명
일단 <input> tag 클릭하여 img를 업로드 하면 change event handler가 실행된다.
실제 img File의 img를 읽기위해서는 js에서 제공하는 FileReader 라는 객체를 이용해야 하므로 FileReader 객체를 생성하고 readAsDataURL 이라는 메서드를 통해 img File의 data를 base64로 형태로 인코딩하여 읽는다. 해당 작업이 완료되면
fileReader.onload 가 실행되고 base64data 에 img data를 할당하고 base64data를 <img id="previewImg"> 의 src 속성에 넣어주면 된다.
여기서 말하는 Base64 인코딩은 아스키코드에서 사용되는 문자64개로 Data를 표현한다고 이해하면 된다. 어떻게 Byte(8bit) 단위의 img Binary data를 나타나는지 궁금했었는데 3개의 byte를 4개의 6bit로 쪼개서 표현한다고 한다.
참고
https://developer.mozilla.org/ko/docs/Web/API/FileReader
FileReader - Web API | MDN
FileReader 객체는 웹 애플리케이션이 비동기적으로 데이터를 읽기 위하여 읽을 파일을 가리키는File 혹은 Blob 객체를 이용해 파일의 내용을(혹은 raw data버퍼로) 읽고 사용자의 컴퓨터에 저장하는
developer.mozilla.org
https://developer.mozilla.org/ko/docs/Web/API/FileReader
FileReader - Web API | MDN
FileReader 객체는 웹 애플리케이션이 비동기적으로 데이터를 읽기 위하여 읽을 파일을 가리키는File 혹은 Blob 객체를 이용해 파일의 내용을(혹은 raw data버퍼로) 읽고 사용자의 컴퓨터에 저장하는
developer.mozilla.org
https://developer.mozilla.org/ko/docs/Web/API/FileReader/readAsDataURL
FileReader.readAsDataURL() - Web API | MDN
readAsDataURL 메서드는 컨텐츠를 특정 Blob 이나 File에서 읽어 오는 역할을 합니다. 읽어오는 read 행위가 종료되는 경우에, readyState 의 상태가 DONE이 되며, loadend 이벤트가 트리거 됩니다. 이와 함께, b
developer.mozilla.org
'⭐FE' 카테고리의 다른 글
| Nextjs 터보팩? (0) | 2024.11.18 |
|---|---|
| [JS] base64 img data를 img File 형태로 변경하기 (0) | 2024.05.18 |
| Yarn berry Package Manager 설치방법 (0) | 2024.02.12 |
| react lazy loading 처리 방법 ( suspense와 lazy 이용 ) (0) | 2024.01.24 |
| project별로 prettier 설정하기 ( vscode ) (0) | 2023.12.18 |