데이터는 인코딩 과정을 거쳐 서버에 전송된다. 데이터 인코딩의 진짜 목적은 Standard format에 맞게 데이터를 만들어서 인터넷으로 전송하는 것이다.

multipart form data

멀티파트 폼 데이터는 text data, binary data를 서버에 함께 전송할떄 사용되는 인코딩 방식이다.

태그의 enctype (encoding type) 속성은 데이터를 어떻게 인코딩 할 것인지 알려준다. 특히 HTML 폼에서 파일 업로드시 사용되는데, 큰 파일을 여러개의 파트 (multiple parts)로 쪼개서 서버에 폼 데이터를 전송한다.

form data 로 전송

파일만 요청을 보내는 경우에는 폼을 만들어 간단하게 요청을 할 수 있다

form 태그를 사용하는 경우 file upload 필드가 있어야 하고, submit 동작이 있어야 하는데 submit 시에 브라우저에 form에 입력된 데이터를 FormData로 묶어내고 서버에 전송한다.

이때 submit 동작은 우리가 흔히 알고 있듯, 페이지를 새로고침하기 때문에 e.preventDefault()를 넣어주어야 할 수도 있다.

 <form action=`${url}` method="POST" 
        enctype="multipart/form-data"> 
  <input type="file" name="uploadfile" />
	<input type="submit" value="Upload File"/> 
 </form> 

함수를 사용하여 전송

함수를 사용하여 전송할때는 formData 객체를 만들어 주어야 한다.
1. formData 객체 생성후 formData 객체에 파일을 추가함
2. 서버에 전송하기 위해 XMLHttpRequest / fetch API 를 사용함

함수로 데이터를 전송하는 경우 페이지가 리로딩되는 문제는 걱정하지 않아도 된다
나의 경우 axios를 사용했다

export const saveData = (form: any) => {
// form 안에는 title, contents, file 등의 키들이 들어가 있다

// form data 객체를 생성하고 
	const formData = new FormData()

//form 객체를 돌면서 key, value를 formData에 붙인다 
	Object.entries(form).forEach(([key, value]) => {
		formData.append(key, value as any)
	})

	return axios
		.post(`${BASE_URL}`, formData, {
			headers: {
				'Content-Type ': 'multipart/form-data',
			},
		})
		.then((res) => {
			return res.data
		})
		.catch((err) => {
			return err
		})
}

간단하게 바로 서버에 전송하는 경우는 form 태그로 전송하고, 컨트롤이 필요한 경우 자바스크립트 함수를 사용하여 보내면 되곘다

참고:
https://www.geeksforgeeks.org/define-multipart-form-data/