[React] axios로 form 데이터 파일 전송

axios

fetch API 처럼 백엔드와의 비동기 처리를 가능케 하는 또 다른 방법으로 axios 가 있다.

 

설치

npm i axios

터미널에 해당 명령어를 입력해 axios를 설치해줘야 한다.

import axios from 'axios'

사용을 원하는 파일에 import를 하면 된다.

 

사용 방법

const response = await axios(url, option);

위와 같은 방법으로 써도 되고, 아래와 같은 방법도 있다.

const response1 = await axios(option) // option 안에 url 프로퍼티로 url 전달
const response2 = await axios.post(...) // 메서드 방식으로 http 통신 방법 설정

url - http 통신을 할 (백엔드) 주소

option - 통신 옵션을 설정하는 객체

 

form 데이터 만들기

const formData = new FormData();

form 형식의 데이터를 직접 만들려면 FormData() 객체를 생성한다.

formData.append('key', value);

key - 고유 키 명칭

value - 백엔드로 전달해줄 데이터 (여기서는 formData가 들어간다.)

formData.append('file', e.target.files[0]);

file은 이벤트 객체로부터 위와 같이 가져올 수 있다.

이 때 key값을 백엔드가 명시해놓았다면, 그 key값과 동일하게 프론트에서 작성해주어야 한다. 그렇지 않으면 422 오류가 뜬다.

 

실제 사용 코드

const option = {
    method: 'POST',
    data: formData,
    headers: {
      'Content-Type': 'multipart/form-data',
    },
    responseType : 'arraybuffer'
}

나는 옵션 객체를 다음과 같이 설정해주었다.

method - HTTP 통신 방식

data - axios 통신으로 전달하고 싶은 데이터 (자동으로 json 형식으로 바뀌어 보내진다)

headers - formData 를 전송하는 경우 위와 같이 미리 타입을 명시해주어야 한다.

responseType - 백엔드에서 응답하는 데이터의 타입

const response = await axios(url,{
    method: 'POST',
    data: formData,
    headers: {
      'Content-Type': 'multipart/form-data',
    },
    responseType : 'arraybuffer',
  }