[typescript] REST API 호출 시 파일 업로드 방법

12 Dec 2023

typescript

파일을 REST API를 통해 업로드하려는 경우, TypeScript를 사용하여 파일을 업로드하는 방법에 대해 알아보겠습니다.

1. Form 데이터로 파일 업로드하기

보통 FormData 객체를 사용하여 파일을 업로드합니다. 마찬가지로 TypeScript에서도 이 방법을 활용할 수 있습니다.

아래는 TypeScript로 작성된 파일 업로드 예제입니다.

// 파일 업로드 함수 정의
async function uploadFile(file: File): Promise<void> {
  const formData = new FormData();
  formData.append('file', file);

  const response = await fetch('https://example.com/upload', {
    method: 'POST',
    body: formData
  });

  if (response.ok) {
    console.log('파일 업로드 성공');
  } else {
    console.error('파일 업로드 실패');
  }
}

// 파일 선택 후 업로드
const inputElement = document.getElementById('fileInput') as HTMLInputElement;
inputElement.addEventListener('change', async () => {
  if (inputElement.files && inputElement.files.length > 0) {
    const file = inputElement.files[0];
    await uploadFile(file);
  }
});

2. 라이브러리 활용

때로는 axios나 fetch로 파일을 업로드하는 것보다 라이브러리를 활용하는 편이 편리할 수 있습니다. 예를 들어, axios를 사용하여 파일을 업로드하는 방법은 다음과 같습니다.

먼저 axios 라이브러리를 설치합니다.

npm install axios

그리고 아래와 같이 파일을 업로드할 수 있습니다.

import axios from 'axios';

// 파일 업로드
async function uploadFile(file: File): Promise<void> {
  const formData = new FormData();
  formData.append('file', file);

  try {
    const response = await axios.post('https://example.com/upload', formData);
    console.log('파일 업로드 성공', response.data);
  } catch (error) {
    console.error('파일 업로드 실패', error);
  }
}

// 파일 선택 후 업로드
const inputElement = document.getElementById('fileInput') as HTMLInputElement;
inputElement.addEventListener('change', async () => {
  if (inputElement.files && inputElement.files.length > 0) {
    const file = inputElement.files[0];
    await uploadFile(file);
  }
});

이 방법을 사용하면 파일을 쉽게 업로드할 수 있으며, axios는 오류 처리 및 다양한 설정을 지원해줍니다.

마치며

이상으로 TypeScript를 사용하여 REST API에서 파일을 업로드하는 방법에 대해 살펴보았습니다. 필요에 따라 FormData 객체를 직접 사용하거나 axios와 같은 라이브러리를 활용하여 파일을 업로드할 수 있습니다. 각 상황에 맞게 적절한 방법을 선택하여 파일 업로드 기능을 구현하시기 바랍니다.