[Javascript] fetch 파일 업로드 예제

HTML

<div>
    <input type="file" name="file"/>
    <button onclick="sendFile()">업로드</button>
</div>

 

Javascript

fetch로 FormData를 활용해서 파일업로드를 진행할 시 header를 비우고 보내야 됩니다.

<script>
    function sendFile() {
        const formData  = new FormData();
        const input = document.querySelector('input[type="file"]')

        formData.append('file', input.files[0]);

        fetch('/file-upload',{
            method: 'POST',
            body: formData,
        }).then(function(response) {
            console.log(response)
        })
    }
</script>

 

header를 비우는 이유

 

참조

[MDN]: https://developer.mozilla.org/ko/docs/Web/HTTP/Headers/Content-Disposition

Content-Disposition - HTTP | MDN