POST向后端发送数据时，Header 里 Content-Type 的请求方式一般是三种：
1、application/x-www-form-urlencoded
数据会被编码成（名称/值）是标准的编码格式。我们默认使用的都是这种编码格式。
2、multipart/form-data
数据被编码为一条消息，form 表单里每个控件对应消息中的一个部分。主要作用为向后端传输「图片、MP3、文档」等。
3、text/plain
数据以纯文本形式(text/json/xml/html)进行编码，其中不含任何控件或格式字符。
主要聊一下 multipart/form-data
在1995年IETF（互联网工程任务组）出台了RFC1867
《Form-based File Upload in HTML》
用来支持文件上传。所以Content-Type类型添加了 multipart/form-data 用来支持向服务器发送二进制数据。
因此发送 POST 请求时候，form 表单的属性 enctype 有二个值可选：
1、application/x-www-form-urlencoded(默认值，不添加enctype属性值，默认值也生效)
2、multipart/form-data
http://www.faqs.org/rfcs/rfc1867.html https://blog.csdn.net/xiaojianpitt/article/details/6856536
form-data 的主要作用是传输文件「图片、MP3、文档」等。
一、用 ajax 提交（带 form 表单）
<form id=\\\"form\\\"><input type=\\\"file\\\" name=\\\"file\\\" id=\\\"file\\\"/><button type=\\\"button\\\" onclick=\\\"submitFn()\\\">提交</button></form><script>function submitFn(){var _form = document.getElementById(\\\'form\\\');var formData = new FormData(_form);var request = new XMLHttpRequest();request.open(\\\"POST\\\", \\\"send.php\\\");request.send(formData);}</script>
二、用 ajax 提交（只提交单个 input ）
<input type=\\\"file\\\" name=\\\"file\\\" id=\\\"file\\\"/><button type=\\\"button\\\" onclick=\\\"submitFn()\\\">提交</button><script>function submitFn(){var _file = document.getElementById(\\\'file\\\');var formData = new FormData();formData.append(\\\'file\\\',_file.files[0]);var request = new XMLHttpRequest();request.open(\\\"POST\\\", \\\"send.php\\\");request.send(formData);}</script>
三、传统的 form 表单提交
<form action=\\\"/send.php\\\" enctype=\\\"multipart/form-data\\\" method=\\\"post\\\"><input type=\\\"file\\\" name=\\\"file\\\"/><input type=\\\"submit\\\" value=\\\"提交\\\"></form>//input 为 text 的时候，可正常传输数据，但 input 为 file 的时候，看不到数据//未与后台验证，但目测可以。（见谅）
提交正确的格式为：
点击「view source」可查看源代码，如下：
------WebKitFormBoundaryExT5QEXwektbWBhSContent-Disposition: form-data; name=\\\"file\\\"; filename=\\\"www.tar.gz\\\"Content-Type: application/x-gzip------WebKitFormBoundaryExT5QEXwektbWBhS--
如果你上传 FromData 格式有问题的话，可以尝试使用 jQuery 或者 axios 来替换你自己封装的Ajax方法。
资料参考：
https://blog.csdn.net/xiaojianpitt/article/details/6856536
https://imququ.com/post/four-ways-to-post-data-in-http.html
https://www.cnblogs.com/wonyun/p/7966967.html
https://juejin.im/post/5a43b10c518825146b10d275
原创文章，作者：小道研究，如若转载，请注明出处：https://www.sudun.com/ask/34509.html
