axios 사용시 폼 데이터 전송하기 (+파일 업로드)

axios 의 post 기능은 기본적으로 폼 데이터 전송방식을 사용하지 않기 때문에 서버쪽에서 파라메터를 받는 부분을 수정할 수 없는 상황이라면 문제가 됩니다. 보통 외부 API 서비스를 사용할 때 많이 발생하지요.

// 보통 axios 는 아래와 같이 보내게 된다. 
// 이렇게 보내면 폼 전송형식이 아닌 JSON 포맷으로 전송하게 된다.
axios.post('https://domain/form-post-url', {
  name: '이름'
  key: '값'
}).then((response) => {
  // 응답 처리
})
.catch((error) => {
  // 예외 처리
})

이를 해결하기 위해 가장 간단한 방법은 과거부터 오랫동안 사용해온 보이지 않는 <form> 태그를 이용하는 방법입니다.

하지만 태그를 이용한 방법보다 간단히 자바스크립트로 처리할 수 있는 방법이 있는데 바로 FormData 를 사용하는 방식입니다.

const frm = new FormData()
frm.append('name', '이름')
frm.append('key', '값')

axios.post('https://domain/form-post-url', frm)
.then((response) => {
  // 응답 처리
})
.catch((error) => {
  // 예외 처리
})

일반적인 데이터를 폼 데이터 형식으로 POST 하기에는 위의 코드로 처리가 됩니다. 하지만 파일업로드까지 axios 로 처리하려면 추가적인 헤더 설정이 필요합니다. 아래와 같이 전송할 때 헤더에 Content-Type 을 “multipart/form-data” 로 설정해야 파일 업로드가 가능합니다.

<form>
  <input type="file" name="photo" id="photo" />
</form>

<script>
var frm = new FormData();
var photoFile = document.getElementById("photo");
frm.append("photo", photoFile.files[0]);
axios.post('https://domain/form-post-url', frm, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
})
.then((response) => {
  // 응답 처리
})
.catch((error) => {
  // 예외 처리
})
</script>

좀 더 FormData() 에 대해 자세히 알아보려면 MDN 문서 ( https://developer.mozilla.org/ko/docs/Web/API/FormData ) 를 참조하시기 바랍니다.

마지막으로.. 아쉽게도 이 FormData 는 마이크로소프트 인터넷 익스플로러 10 부터만 지원합니다. ㅜ.ㅜ;

이상으로 axios 를 활용한 폼데이터 전송을 알아봤습니다.