multipart / form-data

개요

처음에 파일을 백엔드에 넘길때 파라미터로 그냥 넘기려했는데 에러가 자꾸 나길래 해결법을 찾다 보니 file을 전송하려면 그냥 params값을 넘기는것이 아니라 new FormData라는곳에 key : value로 적재를 해서 보내야한다.

사용법

1. ev.target.files

<input type='file' accept='image/*, audio/*, .pdf, .txt' onChange={onChangeHandler} />

이런 html태그가 있고
accept는 올릴수 있는 파일들 셋팅이며 image/* 같은 코드는 이미지포맷 전체
.pdf같은 코드는 .pdf로 끝나는 파일을 뜻한다

const onChangeHandler = (ev) => {
	const files = ev.target.files
    console.log(files)
}

이렇게 onChange시 input file을 선택하면 콘솔에 FileList하고 객체로 정보값이 들어오게된다. (multipl속성을 쓰면 여러개의 인덱스를 가지지만 한개를 기준으로 하면 ev.target.files[0]을 쓰면된다.)

2. new FormData

이렇게 콘솔을 확인했으면

const formData = new FormData;
formData.append('files', files, files.name );

이렇게 new FormData를 변수에 담고 데이터를 적재해 준다.
매개변수 3개는 (속성, 데이터정보를 담은 변수(state or ref), 나타낼 파일명)

3. parameters

method: 'post',
      url: 'enquire/create',
      data: formData,
      headers: {
        'Content-Type': 'multipart/form-data'
      }

파라미터를 호출하는 코드에서
data: formData,
headers: {'Content-Type': 'multipart/form-data'}
이 두코드를 수정해서 요청하면 정상적으로 post동작을 수행한다.