表单提交

最新推荐文章于 2024-06-07 22:59:08 发布

原创最新推荐文章于 2024-06-07 22:59:08 发布 · 216 阅读

0 ·

CC 4.0 BY-SA版权

http 专栏收录该内容

2 篇文章

订阅专栏

序言

MDN文档里写到：Content-Type 实体头部用于指示资源的MIME类型 media type 。
其中mime类型就有非常多，在网上一查就会知道对应的文件应该是怎样的mime类型。那么Content-Type与提交表单有什么关系呢？

表单

与表单相关的Content-Type其实只有三种：application/json、application/x-www-form-urlencoded、multipart/form-data。

application/json

JSON格式的提交，最终发的内容将是一段json格式的字符串，后端只需要反序列化即可得到相应的JSON对象。非常适合于发送复杂结构的内容

application/x-www-form-urlencoded

原生form的提交方式就是application/x-www-form-urlencoded，最终提交到后端的数据应该存放在payload中，表现形式为GET请求时的params，key=value&key2=value…这时可以使用qs库stringify的方法为我们做到。

multipart/form-data

数据将以key:value的方式提交。与application/json不同的是，内容将并不会被序列化。当有文件上传时以multipart/form-data提交数据是唯一的处理方式。表现为存储在form-data中而不是payload。
?：

POST http://www.example.com HTTP/1.1
Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryrGKCBY7qhFd3TrwA

------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="text"

title
------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="file"; filename="chrome.png"
Content-Type: image/png

PNG ... content of chrome.png ...
------WebKitFormBoundaryrGKCBY7qhFd3TrwA--