[express.js] FileReader API

FileReader API란?

• 이미지 파일을 동적으로 올릴 수 있게 해준다.

소스 코드

// HTML파일

 <div class="row mb-3">
        <label for="img" class="form-label">Image</label>
        // multiple 해주면 여러개 올릴 수 있다.
        <input type="file" class="form-control" name="image" id="img" required>
        <img src="#" id="imgPreview" alt="" class="mt-3" style="width: 100px;">
    </div>

// HTML 파일 밑 script

<!-- img src 태그에 내가 올린 이미지 파일이 올라갈 수 있도록  -->
<script>
    function readFile(inputEl) {
        if (inputEl.files && inputEl.files[0]) {
            let reader = new FileReader();
            reader.readAsDataURL(inputEl.files[0]);
            reader.onload = function(e) {
                document.querySelector('#imgPreview').setAttribute('src', e.target.result);
            }
        }
    }

//이미지 파일 id에 함수를 실행해준다.
document.querySelector('#img').addEventListener('change', function() {
        readFile(this);
    })
</script>

• 이미지 파일 id에 함수를 실행해준다.
• 함수는 this를 읽어온다. this는 input 태그에 있는 것들을 읽어오고, new FileReader()를 통해 파일을 읽어온다. 그걸 reader 변수에 담고 filereader를 이용하여 이미지 파일의 정보의 URL을 담는다. 파일이 로드가 되면 미리 보여준다.

 console.log(inputEl.files);
 // 어떤 파일이 몇 개 담겨있고 파일들의 정보를 알려준다.
 console.log(inputEl.files[0]);
 // 파일의 정보를 알려준다.

• FileReader 객체는 비동기적으로 데이터를 읽기 위하여 읽을 파일을 가리키는 File 혹은 Blob 객체를 이용해 파일의 내용을 읽고 사용자의 컴퓨터에 저장 가능하게 해준다.