[React] Form Data 전송

회원가입을 할때, 또는 어떤 페이지에서 파일(이미지), 제목, 내용을 DB에 저장하는 페이지가 있다고 가정했을때, 파일을 http 통신으로 전송 하려면 formData 객체를 이용하여 보내야 한다.

formData 객체는 XMLHttpRequest 전송을 위하여 설계된 특수한 객체 형태 이다.
(특수한 개체여서 특정한 조작을 가하지 않으면 문자열 화 불가능)

formData 객체는 key, value 형식으로 되어 있는 객체이다.

formData.append('key', value);

FormData 객체는 데이터를 multipart/form-data 형식으로 전송할 수 있다.

Blob(Binary Large Object, 블랍)은 이미지, 사운드, 비디오와 같은 멀티미디어 데이터를 다룰 때 사용할 수 있다.
file은 multipart/form-data, data는 application/json 형식으로 보내기 위해 Blob을 사용했다.

(...)
 
 const onFinish =async()=>{
    const formData = new FormData()
    
    formData.append("file", files[0]) //files[0] === upload file
  
    const value = [{
      title: "hello",
      content: "wolrd"
    }]
    
    const blob = new Blob([JSON.stringify(value)], {type: "application/json"}) 
    
    formData.append("data",blob) // 또는  formData.append("data", JSON.stringify(value)); // JSON 형식으로 파싱.(백엔드의 요청에 따라 전송방식이 달라진다.)
   await axios({
      method: "POST",
      url: `http://xxxxxx.com/api/xx`,
      mode: "cors",
      headers: {
        "Content-Type": "multipart/form-data", // Content-Type을 반드시 이렇게 하여야 한다.
      },
      data: formData, // data 전송시에 반드시 생성되어 있는 formData 객체만 전송 하여야 한다.
    })
}
 
 (...)

윗부분에 Content-Type 과 data 부분의 포인트를 틀려서는 안된다.

저부분이 다를 경우 파일과 JSON 데이터들이 올바르지 않게 전송될 수 있다.

[REACT, JS, AXIOS] JS 다중 파일 및 JSON 전송
[#. React] React에서 file, json data를 같이 formData에 넣어서 REST API에 post 하기