如何指定提交到服务器时应如何编码表单数据？

在web开发中，表单数据是一个非常重要的组成部分。当需要将表单数据提交到服务器时，需要将表单数据编码成特定的格式，以便服务器能够正确地解析并处理表单数据。

在提交表单数据时，可以使用两种编码格式：application/x-www-form-urlencoded 和 multipart/form-data。

application/x-www-form-urlencoded 格式

application/x-www-form-urlencoded 是最常用的表单数据编码格式。在这种格式下，表单数据会以键值对的形式提交，并且每个键值对之间会用 & 符号分隔。例如：

POST /form HTTP/1.1
Host: example.com
Content-Type: application/x-www-form-urlencoded

name=John&age=30&gender=male

在这个例子中，表单数据包含了 name、age 和 gender 三个字段，分别对应了 John、30 和 male 三个值。

当使用 application/x-www-form-urlencoded 格式提交表单数据时，可以使用 URLSearchParams API 进行编码。例如：

const formData = new URLSearchParams();
formData.append('name', 'John');
formData.append('age', '30');
formData.append('gender', 'male');

fetch('/form', {
  method: 'POST',
  body: formData,
});

multipart/form-data 格式

multipart/form-data 是一种特殊的表单数据编码格式，用于上传文件或非文本数据。在这种格式下，表单数据会被分成多个部分，并且每个部分都需要有一个唯一的 Content-Disposition 头来指定该部分的名称和类型。例如：

POST /form HTTP/1.1
Host: example.com
Content-Type: multipart/form-data; boundary=---------------------------1234abcd

-----------------------------1234abcd
Content-Disposition: form-data; name="name"

John
-----------------------------1234abcd
Content-Disposition: form-data; name="age"

30
-----------------------------1234abcd
Content-Disposition: form-data; name="avatar"; filename="avatar.png"
Content-Type: image/png

... binary data ...
-----------------------------1234abcd--

在这个例子中，表单数据包含了 name、age 和 avatar 三个字段，其中 avatar 是一个文件上传字段，上传了一个名为 avatar.png 的 PNG 图片。

当使用 multipart/form-data 格式提交表单数据时，可以使用 FormData API 进行编码。例如：

const formData = new FormData();
formData.append('name', 'John');
formData.append('age', '30');
formData.append('avatar', fileInput.files[0]);

fetch('/form', {
  method: 'POST',
  body: formData,
});

上述代码将会使用 FormData API 创建一个表单数据对象，并将表单数据中的 name、age 和 avatar 三个字段添加到表单数据对象中。其中 avatar 字段将会使用 fileInput 中选中的文件对象进行填充。最后，通过使用 fetch 函数提交表单数据到服务器。