multipart/form-data上传文件

前言

• 在使用form表单的时候，一旦点击提交触发submit事件，一般会使得页面跳转，页面间的跳转等行为的控制权往往在后端，后端会控制页面的跳转及数据传递，但是在某些时候不希望页面跳转，或者说想要将控制权放在前端，通过js来操作页面的跳转或数据变化。
  一般这种异步的操作，我们都会想到ajax方式，因此在实现了功能后，就整理了这篇文章，通过ajax方式实现form表单的提交并进行后续的异步操作。
• form表单（ajax同样）默认情况下是 application/x-www-urlencoded，当表单使用 POST 请求时，数据会被以 x-www-urlencoded 方式编码到 Body 中来传送，而如果 GET 请求，则是附在 url 链接后面来发送。GET 请求只支持 ASCII 字符集，因此，如果我们要发送更大字符集的内容，我们应使用 POST 请求。
• “application / x-www-form-urlencoded”对于发送大量二进制数据或包含非ASCII字符的文本效率低下。“multipart / form-data”应该用于提交包含文件，非ASCII数据和二进制数据的表单。

两种上传大文件的方式

传统form表单上传

（在提交表单时会刷新页面，影响用户体验）

// 注：form 表单中 enctype 的默认值是 enctype="application/x- www-form-urlencoded".
<FORM method="POST" action="http://w.sohu.com/t2/upload.do" enctype="multipart/form-data">
    <INPUT type="text" name="city" value="Santa colo">
    <INPUT type="text" name="desc">
    <INPUT type="file" name="pic">
 </FORM>

// 浏览器发出请求
POST /t2/upload.do HTTP/1.1
User-Agent: SOHUWapRebot
Accept-Language: zh-cn,zh;q=0.5
Accept-Charset: GBK,utf-8;q=0.7,*;q=0.7
Connection: keep-alive
Content-Length: 60408
Content-Type:multipart/form-data; boundary=ZnGpDtePMx0KrHh_G0X99Yef9r8JZsRJSXC
Host: w.sohu.com

--ZnGpDtePMx0KrHh_G0X99Yef9r8JZsRJSXC
Content-Disposition: form-data; name="city"

Santa colo
--ZnGpDtePMx0KrHh_G0X99Yef9r8JZsRJSXC
Content-Disposition: form-data;name="desc"
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
 
...
--ZnGpDtePMx0KrHh_G0X99Yef9r8JZsRJSXC
Content-Disposition: form-data;name="pic"; filename="photo.jpg"
Content-Type: application/octet-stream
Content-Transfer-Encoding: binary
 
... binary data of the jpg ...
--ZnGpDtePMx0KrHh_G0X99Yef9r8JZsRJSXC--

从上面的 multipart/form-data 格式发送的请求的样式来看，它包含了多个 Parts，每个 Part 都包含头信息部分，
Part 头信息中必须包含一个 Content-Disposition 头，其他的头信息则为可选项， 比如 Content-Type 等。
Content-Disposition 包含了 type 和 一个名字为 name 的 parameter，type 是 form-data，name 参数的值则为表单控件（也即 field）的名字，如果是文件，那么还有一个 filename 参数，值就是文件名。
比如：

Content-Disposition: form-data; name=“user”; filename=“hello.txt”
1
上面的 “user” 就是表单中的控件的名字，后面的参数 filename 则是点选的文件名。
对于可选的 Content-Type（如果没有的话），默认就是 text/plain。

Axios上传（多个文件）

注意:如果要多选文件需要在input上增加属性 multiple="multiple"

<div class =“ form-group files text-center” ref =“ fileform”>
	<input type="text" value="ken" id="userInfo">
	<input type =“ file” multiple =“ multiple” id="files">
</ div>

//FormData对象用以将数据编译成键值对如：‘name=ken&age=15’
let FormData = new FormData()
let aInput = document.getElementById('userInfo')
let aFiles = document.getElementById('files')

// 把text先加入到FormData
FormData.append("username", aInput[0].value)
//遍历所有file元素上的文件也加入FormData
for (let i= 0; i< aFiles.files.length; i++ ){
     
     fromData.append('files'+i,uploadFiles[i])
}
axios({
     
	//配置HTTP请求体Content-Type
	header	:{
     
		'Content-Type': 'multiple="multiple"'
	}，
	url		:'......',
	method	: 'post',
	data	:FormData
})