[React] 파일 업로드

FormData

• XMLHttpRequest 전송을 위하여 설계된 특수한 객체 형태
• 문자열화 하려면 특정한 조작이 필요
• key, value 형식으로 되어 있음
• header의 content-type을 multipart/form-data 로 반드시 설정해주어야 함

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

axios.post('http://localhost:3079/file/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
}).then((res) => {
	    ...

file input 받기

1) form 태그(다중 업로드 가능)

...
        <form>
          <input 
            className='file-input'
            type="file"
						mulitple
            onChange={handleFileChange}
          />
          <button onClick={uploadFile}>upload</button>
        </form>
...

2) 받아온 파일 데이터 보관

const [files, setFiles] = useState([]);

const handleFilesChange = (e) => {
    setFiles(Array.from(e.target.files));
}

3) 서버로 전송

const uploadFiles = (e) => {
    e.preventDefault();
    const formData = new FormData();

    files.map((file) => {
      formData.append("files", file);
    });

    console.log(Array.from(formData));

    axios.post('http://localhost:3079/file/uploads', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })
    .then((res) => {
        console.log(res.data);
    }).catch((err) => {
        console.error(err);
    });
}