formdata,formdataappend怎么用
表单提交FormData方法详解
FormData的主要用途有两个：
1、将form表单元素的name与value进行组合，实现表单数据的序列化，从而减少表单元素的拼接，提高工作效率。
2、异步上传文件
注意：需要设置Content-Type
eg：Vuejs结合axios时设置：
let config= headers: {'Content-Type': 'application/x-www-form-urlencoded'}
axios.post('/path', {params:.. },config).then(...).catch(...)
一、创建formData对象
1、创建一个空对象：
2、通过表单对formData进行初始化
创建表单：
通过表单元素作为参数，实现对formData的初始化：
二、操作方法
1、通过get(key)与getAll(key)来获取相对应的值
2、通过append(key,value)在数据末尾追加数据
3、通过set(key, value)来设置修改数据
4、通过has(key)来判断是否存在对应的key值
5、通过delete(key)可以删除数据
三、通过XMLHttpRequest发送数据
创建表单：
发送数据：
原文链接：
FormData （form 表单数据提交 处理 生成文件接口url的方式）
场景：比如现在有导出csv的url, 要求方式为get/post，后端是要求数据是form表单数据form-data的形式。
处理：
? ? 1 ，直接用form表单提交
? ? ? ? ? ? ? ? 设置好action，method即可，设置form提交content-type是multipart/form-data，如果不设置?enctype?属性，那么最终就会以 application/x-www-form-urlencoded 的默认方式提交数据。
? ? 2 ， xmlHttpRequest方式处理（使用ajax）
? ? ? ? ? ? 需要数据处理为 FormData 形式即可（ ）
? ? ? ? ? ? 以vue的项目为例,下文的someData为举例
? ? ? ? ? ?//生成formData类型数据
? ? ? ? ? ? const formDataTrans = new FormData();
? ??????????formDataTrans.append("name", someData.name);
? ??????????formDataTrans.append("age", someData.age);
? ??????????formDataTrans.append("sex", someData.targetDesc);
??（ 如果传递参数为formData形式，浏览器会忽略或者删除自定的Content-type，并添加Content-type："multipart/form-data" ）
? ? ? ? ? ? ?ajax({
????????????????url: "后端定义的接口,
????????????????method：‘post',
? ? ? ? ? ? ? ? headers:{
? ? ? ? ? ? ? ? ? ? ? ? "Content-type": "multipart/form-data"
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? data: formDataTransfer
????????????})
FormData ?接口提供了一种表示表单数据的键值对的构造方式，经过它的数据可以使用? XMLHttpRequest.send() ?方法送出，本接口和此方法都相当简单直接。如果送出时的编码类型被设为?"multipart/form-data"，它会使用和表单一样的格式。
FormData对象
1.模拟HTML表单，相当于将HTML表单映射成表单对象，自动将表单对象中的数据拼接成请求参数的格式
2.异步上传二进制文件
1.准备HTML表单，表单中需要提交数据的表单控件必须添加name属性
2.将HTML表单转化为FormData对象，通过
3.提交表单对象
具体操作
①获取到提交表单的按钮并且给按钮添加点击事件，一旦点击就发送请求
②生成formData实例，将获取到的表单元素作为参数
③创建Ajax对象
④配置请求的方式以及地址
⑤将表单实例作为请求参数发送出去
⑥监听onload事件，当响应状态码为200时，说明请求成功，将结果打印出来即可
①formData. get ( 'key' )------用来获取表单对象的属性值，也就是输入框输入的值，key是表单的name所对应的名字
②formData. set ( 'key' ,'value')------用来设置表单对象属性的值，如果设置的表单属性存在就会覆盖原有的值，如果不存在就会创建这个属性
③formData. delete ( 'key' )-------删除表单对象的属性值
④formData. append ( 'key' ,'value')------向表单对象中添加值，如果属性已存在，那么会保留新旧两个属性及值，但是打印的话，后面添加的会覆盖前面的
①upload事件在上传文件的过程中持续触发，它又有一个onprogress方法
②已经上传的文件大小/文件的总大小*100+'%'-------- loaded (已经上传的文件大小）/ total （文件总大小）*100+'%'
③设置一个变量用来接收进度条的值，之后将值赋值给HYML样式即可
formdata和json传递的效率
formdata和json传递的效率相比json传递的效率高。需要传文件采使用formdata，其余情况一律用json。json是解决不同系统数据格式不统一的问题，最初是用xml，格式解析代价太大，不如json传递的效率高。
Formdata 的用法
FormData类型其实是在XMLHttpRequest 2级定义的，它是为序列化表以及创建与表单格式相同的数据（当然是用于XHR传输）提供便利。
var formData = new FormData();
使用append（）来添加数据
formData.append("file","target”);
formData里面存储的数据形式，一对key/value组成一条数据，key是唯一的，一个key可能对应多个value。如果是使用表单初始化，每一个表单字段对应一条数据，它们的HTML name属性即为key值，它们value属性对应value值。
我们可以通过get(key)/getAll(key)来获取对应的value，
添加数据 ：
我们可以通过append(key, value)来添加数据，如果指定的key不存在则会新增一条数据，如果key存在，则添加到数据的末尾
设置修改数据 ：
我们可以通过set(key, value)来设置修改数据，如果指定的key不存在则会新增一条，如果存在，则会修改对应的value值。
判断是否该数据 ：
我们可以通过has(key)来判断是否对应的key值
删除数据 ：
通过delete(key)，来删除数据
遍历
我们可以通过entries()来获取一个迭代器，然后遍历所有的数据，
前端向后端传formData格式的数据时，一般用post方式，因为post可以传的数据量比较大，速度快。
Request Payload 请求头部的 Content-Type: application/json，请求正文是一个 json 格式的字符串
Form Data 请求头部的 Content-Type: application/x-www-form-urlencoded
因为application/x-www-form-urlencoded传输的数据太小了 不适合传输文件 后来升级为multipart/form-data
前端小技巧：学会用FormData对象收集表单数据
我们先看一个小例子：
html代码：
需求：是获取form表单中的用户名和密码并包装成一个对象
这个需求是我们大部分时候在发送ajax请求时需要做的一个工作。
传统JS写法：
看一下效果：
可以看到，我们已经实现了需求，但是我们写的JS代码很繁琐，我们需要先获取form表单中input框元素，然后元素的value值，最后包装成一个对象。
FormData的JS写法：
效果如下：
通过这个例子你应该能感受到FormData的便利性，只需要 new FormData(form) 一句代码就可以把form表单内的所有信息都以键值对的形式包装成一个对象返回。
FormData对象是用来将form表单数据编译成键值对，这么做有两个好处：
FormData的常用操作方法：
FormData对象可以帮我们更方便的收集表单数据并中的整理成对象，大大方便了我们发送ajax请求。