많은 경우 RESTful API를 통해 파일과 함께 텍스트 데이터를 전송해야 할 수 있습니다. TypeScript와 Axios를 사용하여 이러한 요청을 만드는 방법에 대해 알아보겠습니다.

멀티파트 데이터 전송

멀티파트 데이터는 여러 부분으로 나뉘어 있는 데이터입니다. 파일과 텍스트 데이터를 함께 전송하는 데 사용됩니다. 이를 위해 FormData 객체를 사용하여 멀티파트 요청을 만들어야 합니다.

아래는 TypeScript와 Axios를 사용하여 멀티파트 데이터를 전송하는 예제입니다.

import axios from 'axios';

const formData = new FormData();
formData.append('textData', 'Hello, World!');
formData.append('file', file);

axios.post('https://example.com/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
})
  .then(response => {
    console.log('File uploaded successfully', response.data);
  })
  .catch(error => {
    console.error('Error uploading file', error);
  });

위 코드에서 ‘textData’는 텍스트 데이터를, ‘file’은 파일을 나타냅니다. 이들을 FormData에 추가하고, axios.post를 사용하여 서버로 전송합니다. 요청 헤더에 'Content-Type': 'multipart/form-data'를 지정하여 멀티파트 데이터를 전송한다는 것을 명시합니다.

결론

이제 TypeScript와 Axios를 사용하여 REST API 호출 시 멀티파트 데이터를 전송하는 방법에 대해 알아보았습니다. 이를 통해 파일과 텍스트 데이터를 함께 전송하는 API 요청을 쉽게 처리할 수 있습니다.

참고문헌: Axios 공식 문서, MDN Web Docs - FormData

이상으로 TypeScript를 사용하여 REST API 호출 시 멀티파트 데이터 전송 방법에 대해 알아본 내용을 마치겠습니다.