var testFormData = new FormData()
背景:


是这样的,最近在实习公司正在进行一个webApp的项目,需要用到图片的上传,在实现这个功能的时候遇到了令人头痛的事-----后台接口想要通过数据流一次过接收图片和其他数据,有想过使用base64的方式传图片,可是这样的话,后台接收到的数据会很大,而且后台还期望以form submit的方式去传送和接受数据,而前端却没有添加form标签,也不打算添加form,直接使用ajax方式传送数据到后台。



另外,我们在填充数据的时候也有这样的烦恼,就是数据存放在store.js里(项目用的是vuejs+vuex),要发送数据的话,要人工序列化数据成想要的格式(这简直反人类好吗!!)



解决办法:


通过一番与后台的交涉和网上查阅了一系列的资料,终于发现了一片新大陆----formData接口!



其实formData不算什么新的技术,只是我之前没有去了解过这方面的内容,这让我更加重视各方面知识的积累,以及认识到自身对前端的知识面还不够广,要多加了解学习!!!要多加了解学习!!!要多加了解学习!!!



FormData:


XMLHttpRequest Level 2添加了一个新的接口

FormData

.利用 FormData对象

,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的 send()

方法来异步的提交这个"表单".比起普通的ajax,使用 FormData

的最大优点就是我们可以异步上传一个二进制文件.




以上是网上关于formData接口的一些描述




使用方法:


使用非常简单,只需要创建formData对象,然后通过append方法往里面塞数据就可以了:




var testFormData = new formData();
testFormData.append("data1",data);




这里的data可以是字符串,也可以是文件,如果是文件的话,连使用form submit提交时需要标注的multipart/form-data都不用加




然后通过ajax发送这个formData对象就可以把文件传送过去了