formdata와 multipart/form-data

>>>formdata

from데이터를 key 와 value로 저장할수있는 데이터 구조이다.
axios ,fetch 등을 사용하여 여러 파일을 업로드해야하는 경우 유용하다.

const formData = new FormData()

formData.append(key,value)

new연산자를 사용하여 새로운 객체를 만들고 append 메소드를 사용해 key와 value을 추가한다.

axios.post('url', formdata)

axios로 서버에 fromdata를 전송하면 append에서 추가한 키와 값이 객체로 전달이된다.

 

---

💡formdata를 사용하는 이유중 하나!
이미지를 업로드 할경우 form태그에 entype 속성값을 multipart/form-data로 설정해주면 이미지파일도 값이 전송할수 있다.
multipart/form-data 는 post를 통해 파일을 보낼 수 있는 인코딩 유형이다

 const onSubmit = () =>{
	const formdata = new Formdata();
	formdata.append('image', img)

	axios.post("url",formdata)
}

  return (
    <form onSumbit={onSumbit} entype="multipart/formdata">
      <input type="file"/>
      <Button type="submit">등록</Button>
    </form>
)