파일 업로드는 많은 웹 애플리케이션에서 필요한 기능 중 하나입니다. Axios는 JavaScript에서 HTTP 요청을 보내기 위한 인기 있는 라이브러리 중 하나입니다. 이번 글에서는 Axios를 사용하여 파일을 업로드하는 방법에 대해 알아보겠습니다.

Axios 설치하기

먼저, Axios를 사용하기 위해 프로젝트에 Axios를 설치해야 합니다. npm을 사용한다면 다음 명령어를 실행하여 Axios를 설치할 수 있습니다.

npm install axios

파일 업로드 코드 작성하기

Axios를 사용하여 파일을 업로드하기 위해서는 FormData 객체를 사용해야 합니다. FormData 객체는 HTML 폼 데이터를 쉽게 생성하고 전송할 수 있는 기능을 제공합니다.

아래는 파일 업로드를 위한 Axios 코드 예시입니다.

import axios from 'axios';

const uploadFile = async (file) => {
  const formData = new FormData();
  formData.append('file', file);

  try {
    const response = await axios.post('/upload', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    });

    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
};

const fileInput = document.getElementById('file-input');

fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0];
  uploadFile(file);
});

위 예제 코드에서는 uploadFile 함수를 정의하여 파일을 업로드하고, 이벤트 리스너를 사용하여 파일 선택 시 uploadFile 함수를 호출합니다. 업로드된 파일의 응답은 콘솔에 출력됩니다.

결론

이 글에서는 Axios를 사용하여 파일을 업로드하는 방법에 대해 알아보았습니다. Axios는 간편하게 HTTP 요청을 처리할 수 있는 강력한 도구이며, 파일 업로드에도 유용하게 사용될 수 있습니다. 많은 웹 애플리케이션에서 파일 업로드를 구현해야 할 때 Axios를 고려해보시기 바랍니다.

\n\n#Axios #파일업로드