[javascript] 파일 업로드 및 다운로드

12 Dec 2023

javascript

파일 업로드와 다운로드는 웹 애플리케이션에서 흔히 사용되는 기능입니다. 사용자는 파일을 업로드하여 서버에 저장하거나, 서버에 저장된 파일을 다운로드하는 기능을 통해 파일을 주고받을 수 있습니다. 이번 블로그 포스트에서는 JavaScript를 사용하여 간단한 파일 업로드와 다운로드 기능을 구현하는 방법에 대해 알아보겠습니다.

파일 업로드하기

파일을 업로드하기 위해서는 HTML에서 input 요소를 사용하여 파일을 선택하고, JavaScript로 선택된 파일을 서버로 전송해야 합니다. 아래는 간단한 파일 업로드를 위한 HTML 및 JavaScript 코드입니다.

<input type="file" id="fileInput">
<button onclick="uploadFile()">Upload</button>

<script>
function uploadFile() {
  const fileInput = document.getElementById('fileInput');
  const file = fileInput.files[0];
  
  const formData = new FormData();
  formData.append('file', file);
  
  fetch('/upload', {
    method: 'POST',
    body: formData
  });
}
</script>

위 코드에서는 input 요소를 통해 파일을 선택하고, uploadFile 함수를 통해 선택된 파일을 서버에 업로드합니다. fetch 함수를 사용하여 서버에 파일을 전송하는데, 이때 FormData를 사용하여 파일을 multipart/form-data 형식으로 전송합니다.

파일 다운로드하기

서버에 저장된 파일을 다운로드하기 위해서는 클라이언트에서 서버로부터 파일을 받아와야 합니다. 아래는 JavaScript를 사용하여 서버로부터 파일을 받아오는 예제 코드입니다.

function downloadFile() {
  fetch('/download')
    .then(response => response.blob())
    .then(blob => {
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = 'file.txt';
      document.body.appendChild(a);
      a.click();
      window.URL.revokeObjectURL(url);
    });
}

위 코드에서는 fetch 함수를 사용하여 /download 엔드포인트로부터 파일을 받아오고, response.blob()을 통해 받아온 데이터를 Blob 객체로 변환합니다. 그 후에는 Blob 객체를 사용하여 파일을 다운로드합니다.

이렇게 JavaScript를 사용하여 파일 업로드와 다운로드 기능을 구현할 수 있습니다. 각 사용 사례에 맞게 서버 측 코드와 함께 구현하여 효율적인 파일 처리를 할 수 있습니다.

참고 문헌: