[React] Form Data

Form Data?

• 특수한 개체여서 특정한 조작을 가하지 않으면 문자열 화 불가능!
• 객체는 key, value 형식으로 되어 있다.formData.append('key', value);
• Blob은 이미지, 사운드, 비디오와 같은 멀티미디어 데이터를 다룰때 사용

적용

기존 사용 코드
처음에는 json형태로 데이터만 주고 받았지만, 이미지를 전송해야하는 상황이 생겼고 서버쪽에서 다른 형식을 요청하였다. 단순히 Body에 Data를 넣어서 전송하는 방식이다.

await axios.post("/survey/create", postData, {
            headers: { // 설문 만드는 유저를 구분 하는 JWT
                Authorization: 'Bearer ' + jwt,
            },
        })

새롭게 요청한 코드

const formData = new FormData()
 
const blob = new Blob([JSON.stringify(postData)], { type: "application/json" })

formData.append("file", files[0]) // 파일도 추가 할 수 있다.
formData.append("surveyReqDto", blob)

await axios({
    method: "POST",
    url: `/survey/create`,
    headers: {
        Authorization: 'Bearer ' + jwt,
    },
    data: formData,
})

• formData를 만들어 준다.
• blob에 type을 지정하고, JSON형태로 변환해 준다.
• formData는 특수한 개체이기에 append를 통해 조작해준다.