TL; DR

파일 업로드가 필요한 경우 여기에서 form-data가 유일한 옵션입니다. 그렇지 않으면 그들은 같은 일을 합니다. form-data는 x-www-form-urlencoded보다 데이터를 더 멋지게 인코딩하는 방법입니다. x-www-form-urlencoded는 .txt 파일로, form-data는 .html 파일로 생각할 수 있습니다. 하루가 끝나면 둘 다 일부 http 페이로드를 제공합니다.

아래의 🏀 getd.io 플레이그라운드 링크 🏀를 시도하여 헤더와 본문이 어떻게 생겼는지 확인하십시오.

Send a request with x-www-form-urlencoded

Send a request with form-data

컨텐츠 타입

컨텐츠 타입


x-www-form-urlencodedapplication/x-www-form-urlencoded
양식 데이터multipart/form-data; boundary={boundary string}
form-data에 대한 빠른 참고 사항: 일반적으로 브라우저는 임의의 {boundary string} , 예를 들어 ----WebKitFormBoundaryKGUmWkAsjo5nUBp2 를 생성하지만 원하는 경우 직접 지정할 수 있습니다. 예를 보려면 아래를 참조하십시오.

페이로드 요청

아래 필드가 있는 로그인 양식이 있다고 가정해 보겠습니다.


필드
가치


사용자 이름
테크보스

비밀번호
Pa$$w0번째


양식을 게시하면 x-www-form-urlencoded에 대한 페이로드는 아래와 같습니다. 문자열은 encodeURIComponent() 'd입니다.

username=techbos&password=Pa%24%24w0rd

form-data 의 경우 각 (키, 값) 쌍은 {boundary string}를 구분 기호로 사용하여 자체 섹션으로 인코딩됩니다. 여기에 파일 업로드가 어떻게 보이는지 보여주기 위해 마지막에 샘플 섹션도 포함했습니다.

--{boundary string}
Content-Disposition: form-data; name="username",

techbos
--{boundary string}
Content-Disposition: form-data; name="password",

Pa$$w0rd
--{boundary string}
Content-Disposition: form-data; name="file"; filename="image.jpg"
Content-Type: image/jpeg,

--{boundary string}--

인라인 설명:

요청을 보내는 API

x-www-form-urlencoded
양식 데이터


fetch()
body as URLSearchParams
body as FormData

request()
form option
formData option

axios()
data as URLSearchParams
data as FormData

응답을 처리하는 API

x-www-form-urlencoded 의 경우 bodyParser 을 사용하면 페이로드를 req.body 의 형식으로 { key, value } 로 구문 분석합니다.

express.use(bodyParser.urlencoded({ extended: true }));
express.post('/my-form-endpoint', (req, res) => {
  console.log(req.body.username); // print 'techbos'
});

Express v4.16.0+에도 동일한 기능이 내장되어 있습니다.
form-data 구문 분석을 위해 busboy 또는 formidable 과 같은 패키지를 사용할 수 있습니다. 방법은 해당 문서를 참조하십시오.

양식 전송/처리에 가장 좋아하는 라이브러리는 무엇입니까? 경험을 공유하려면 아래에 의견을 남겨주세요 ❤️❤️❤️!

getd.io을 확인하고 다음에 보고 싶은 기능에 대한 피드백을 남겨주세요 ❤️❤️❤️!