자바스크립트 fetch API는 웹 애플리케이션에서 HTTP 요청을 처리하는 기능을 제공합니다. 이 기능을 사용하여 파일 업로드를 구현할 수도 있습니다. 이 글에서는 자바스크립트 fetch API를 사용하여 파일을 업로드하는 방법에 대해 알아보겠습니다.

파일 선택하기

먼저 파일을 선택할 수 있는 <input type="file"> 요소를 HTML에 추가해야 합니다. 이 요소에는 사용자가 업로드할 파일을 선택할 수 있도록 인터페이스를 제공합니다.

<input type="file" id="fileInput">

파일 업로드하기

다음으로, fetch API를 사용하여 선택한 파일을 서버에 업로드하는 함수를 작성해 보겠습니다.

const uploadFile = async () => {
  const fileInput = document.getElementById('fileInput');
  const file = fileInput.files[0];
  
  const formData = new FormData();
  formData.append('file', file);

  try {
    const response = await fetch('/upload', {
      method: 'POST',
      body: formData
    });
    
    if (response.ok) {
      // 파일 업로드 성공
      console.log('파일 업로드 성공');
    } else {
      // 파일 업로드 실패
      console.error('파일 업로드 실패');
    }
  } catch (error) {
    console.error('오류 발생:', error);
  }
}

위 코드에서는 fetch() 함수를 사용하여 POST 요청을 보냅니다. 업로드할 파일은 FormData 객체를 통해 전송되며, FormData는 파일 업로드를 위해 많이 사용되는 객체입니다.

요청이 성공적으로 전송되면 서버의 응답을 확인하고, 응답의 상태 코드를 통해 파일 업로드 성공 여부를 판단합니다.

파일 업로드 버튼에 이벤트 연결하기

마지막으로, 파일 업로드 버튼과 uploadFile 함수를 연결해 보겠습니다. 예를 들어, 다음과 같이 HTML에서 버튼을 생성하고 클릭 이벤트에 uploadFile 함수를 연결할 수 있습니다.

<button onclick="uploadFile()">파일 업로드</button>

또는 자바스크립트로 버튼을 생성하고 이벤트를 연결하는 방법도 있습니다.

const button = document.createElement('button');
button.textContent = '파일 업로드';
button.addEventListener('click', uploadFile);

// 어딘가에 버튼을 추가해주세요

이제 파일을 선택하고 파일 업로드 버튼을 클릭하면, 자바스크립트 fetch API를 사용하여 파일을 서버에 업로드할 수 있습니다.

요약

이번 글에서는 자바스크립트 fetch API를 사용하여 파일을 업로드하는 방법을 알아보았습니다. <input type="file"> 요소를 사용하여 파일을 선택하고, fetch API를 사용하여 업로드 요청을 보내는 방법을 소개했습니다. 이 방법을 사용하면 웹 애플리케이션에서 간편하게 파일 업로드 기능을 구현할 수 있습니다.