ajax+formData发送文件

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对象就可以把文件传送过去了