preface

In order to send a picture to the back end, I used new FormData() to put the append in the picture and simulate form submission. I was in a hurry and thought I could have a happy meal after finishing it. The back end says no data was received… I passed the data to the back end, why did the back end say that it did not receive? So let’s get to the topic of this time

Introduction to the

What is Form Data? What is a RequestPayload? FormData and Payload are the two formats that the browser sends to the interface. The browser differentiates the two formats by the content-type value:

  1. If it isapplication/x-www-form-urlencodedIf, isForm Dataway
  2. If it isapplication/jsonormultipart/form-dataIf, isRequestPayloadThe way.

inPOSTIn the submission

Content-Type The request format
application/x-www-form-urlencoded formdata
application/json request payload
multipart/form-data request payload

As you can see from this article on MDN MIME types: Multipart /form-data can be used to send HTML forms from the browser to the server. As a multipart document format, it consists of different parts separated by a boundary (a string beginning with a ‘–‘). Each part has its own entity, as well as its own HTTP request header, content-Disposition and Content-type for the file upload field, the most commonly used (content-length is ignored because the boundary is used as a delimiter). As shown in the figure below:

Form Data 

Content-Type: multipart/form-data; boundary=aBoundaryString

(other headers associated with the multipart document as a whole)

--aBoundaryString
Content-Disposition: form-data; name="myFile"; filename="img.jpg"
Content-Type: image/jpeg

(data)
--aBoundaryString
Content-Disposition: form-data; name="myField"

(data)
--aBoundaryString
(more subparts)
--aBoundaryString--
Copy the code

Request Paload

What is the difference between request payload and formData in an HTTP request?

Here’s the explanation: FormData and Payload are two formats transmitted by the browser to the interface. The browser distinguishes the two formats by the content-type value. If the format is Application/X-wwW-form-urlencoded, it is form Data. If it is application/ JSON or multipart/form-data, the format is RequestPayload.

Reference links: stackoverflow.com/questions/2… The explanation is as follows:

When a request is accompanied, it might look like this:

POST /some-path HTTP/1.1
Content-Type: application/json

{ "foo" : "bar"."name" : "John" }
Copy the code

If you’re just making a simple Ajax request. The header of the request will be set to content-type: application/json. The browser will simply display your submission as payload, and that’s all it can do, because it doesn’t know where the data came from.

If you submit an HTML form with method=”post” and content-type: Application /x-www-form-urlencoded or Content-type: application/x-www-form-urlencoded Multipart/form – the data. Then your request might look something like this:

POST /some-path HTTP/1.1
Content-Type: application/x-www-form-urlencoded

foo=bar&name=John
Copy the code

Here, the form-data is the request payload. In this case, the browser knows more: it knows that bar is the value of the input field foo of the submitted form. That’s what it shows you.

The difference is that the content-type setting is different, not the way the data is submitted. Both types of commits put the data in message-body. But Chrome’s developer tools use this ContentType to differentiate the display.

payload
So what’s the difference? Why does the back end sometimes not get the value
payload
chrome

The traditional Form submission scenario is constructed as follows:

<form action="/" method="POST">
    <input name="name" type="text">
    <input name="password" type="text"</button> </form>Copy the code

If I click on the submit button here, it triggers the submit function in the browser, and what happens?

Pay attention to the point

Content-type: Application/X-www-form-urlencoded. The value is submitted in the form key1=value1&key2=value2.

Traditional Ajax commit scene construction

function submit2() {
    var xhr = new XMLHttpRequest();
    xhr.timeout = 3000;
    var obj = {a: 1, b: 2};
    xhr.open('POST'.'/');
    xhr.send(obj);
}
Copy the code

First we construct a simple function, and then we fire it. From Chrome feedback:

traditionalajaxThe submission requires the following considerations

  1. The defaultThe content-typefortext/plain.
  2. Request PayloadIt does string conversions on non-strings.
  3. throughxhr.send(JSON.stringify(obj)); Can correct the content to send

Pay attention to the point

  1. When we pass a string,Content-TypeAutomatically converted toxxx-form-xxxIn the form. When an object, it is automatically converted toxxx/json.
  2. Stringkey1=val1&key2=val2In the form ofJSONIt is represented as a string.

conclusion

Content-TypeThe difference of

  1. The traditionalajaxWhen you ask,Content-TypThe default is eThe textType.
  2. The traditionalformAt the time of submission,Content-TypeThe default isFormType.
  3. axiosWhen I pass a string,Content-TypeThe default isFormType.
  4. axiosWhen I pass an object,Content-TypeThe default isJSONType.

Content-TypeThe value of theFormwithThe FormWhen,payloadThe difference between:

  1. Both support string types only (several cases explored above)
  2. FormThe format to be passed iskey1=value1&key2=value2, similar toGETThe request ofQueryStringformat
  3. nonFormAs a general rule, beJSON.stringify(formDataObject)In the form of

So if the back end can’t get a value, whatever form it passes, the back end will consider the Content-type when parsing the form information. If it’s a JSON string, the backend will parse the JSON when it parses the payload. If the string is of the form key1=value1&key2=value2, you need to defragment the string. These things are usually handled by the framework used by the backend, but the interface provided by the framework to the backend may be different, so the front-end partner must discuss with the back-end partner whether to use JSON or FormData to handle the request.

References:

  1. The MIME type
  2. Content-Type
  3. How to set a boundary on a multipart/form-data request while using jquery ajax FormData() with multiple files

Common media format types are as follows:

  • text/htmlHTML format:
  • text/plain: Plain text format
  • text/xmlThe XML format:
  • image/gif: GIF image format
  • image/jpeg: JPG image format
  • image/png: PNG Image format

In order toapplicationMedia format type at the beginning:

  • application/xhtml+xmlXHTML format:
  • application/xml: XML data format
  • application/atom+xml: Atom XML aggregation format
  • application/json: Indicates a JSON data format
  • application/pdfPDF format:
  • application/msword: Word document format
  • application/octet-stream: Binary streaming data (such as a common file download)
  • application/x-www-form-urlencoded ： < form encType = "" >In the defaultencType.formThe form data is encoded askey/valueFormat to the server (the form’s default format for submitting data)

Another common media format is for uploading files:

  • multipart/form-data: This format is used when you need to upload files in the form