파일 업로드 Multipart / Boundary 타입 사용

form태그는 multipart/form-data

[ multipart/form-data ]

출처 : https://velog.io/@ksk7584/Multipart

일반적인 글자와 파일을 전송할 때, 컨텍스트 타입을 내가 보내려는 파일 확장자로 하면 된다.
png파일을 보내고 싶으면 img/png 이런 식으로.

그러나 form태그는 이런 MIME 타입을 지원하지 않기 때문에 AJAX를 써야한다.
그러나 이건 IMG와 X-FORM 타입을 둘 다 보내는 것!

enctype="multipart/form-data"를 사용하면 된다!!
-> 여러 타입의 컨텐트 타입을 동시에 보낼 수 있다!
-> 파트별로 분리해서 보냄
-> IMG 파일을 문자로 바꿔서, HttpRequest Body에 담아 서버로 전송하는 것!

[ boundary ]

절대 충돌되지 않는 [ boundary:-----XXX ] 같은 형식이 바디 데이터에 여러개가 들어감
[ -----XXX ] 가 각자의 컨텐트 타입을 들고 전송하는 것 

[ multipart/form-data 형식으로 이미지를 전송할 때 필요한 데이터 ]

1. 이미지 파일 자체
   이미지를 이진(binary) 형식으로 변환하여 전송

2. MIME 타입
  이미지 파일의 MIME 타입을 명시하여 
  서버가 전송된 데이터를 올바르게 해석할 수 있도록 한다.

3. 파일 이름
   이미지 파일의 원본 파일 이름을 명시하여 
   서버가 이미지 파일을 올바르게 처리할 수 있도록 한다.

4. 다양한 메타데이터(선택적) 
   필요에 따라 이미지와 함께 추가적인 정보(예: 이미지 설명, 사용자 입력 등)를
   함께 전송할 수 있다.

[ 이런 데이터가 전송된다 ]

[ header ]
1. url : /uploadCheck
2. method : post
3. content-type : multipart/form-data; boundary=----jooho

[ body ]
----jooho
x-www-form-urlencoded
title=제목1

----jooho
// image/jpeg //이건 x-from데이터가 아니라서 키=value 이렇게 날아가지 않는다.
image/jpeg; name=imgFile; fileName=hello.jpeg
베이스 64로 인코딩된 문자열

-> 이런 형식으로 전송 된다.

----를 쓰는 이유는 이런 데이터가 들어올 리가 없으니까 일부러 이렇게 쓰는 것이다.