multipart/form-data
A multipart/form-data body is a list of parts, one per form field, each with its own headers and separated by a boundary string that the sender picks and announces in the Content-Type header. It is the standard form encoding that can carry files (RFC 7578).
Header
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gWAt a glance
- Extensions
- None: it describes a body, not a file
- Kind
- Binary
- Parameters
boundary(required): a string that occurs in none of the parts.- In a browser
- Browsers send it rather than display it. A form with a file input needs
enctype="multipart/form-data".
With curl
curl https://api.example.com/upload \ -F 'name=Ada' \ -F '[email protected]'
With fetch
const body = new FormData();
body.append('name', 'Ada');
body.append('photo', fileInput.files[0]);
// No Content-Type: fetch sets it, with the boundary.
await fetch('https://api.example.com/upload', { method: 'POST', body });Common mistakes
Setting Content-Type by hand
With
fetchor axios and aFormDatabody, a header written as plainmultipart/form-datahas no boundary, and the server cannot split the parts. Leave the header out and let the library set it.-Fand-din curl-Fbuilds a multipart body;-dsendsapplication/x-www-form-urlencoded, and curl refuses a command that mixes them.-d @filesends the file's text as the body, not the file as an upload.Size limits answer 413
Servers and proxies cap request bodies (nginx's
client_max_body_sizeis 1 MB by default). A larger upload gets413 Content Too Largebefore your code sees it.