FormData对象

Posted 2021-09-07 qqcc

一、 概述

FormData类型是在XMLHttpRequest level 2定义的，它是为序列化表以及创建与表单格式相同的数据（用于XHR传输）提供便利。FormData对象本身没有任何属性和方法，所有操作方法都在其原型上

二、 使用创建FormData对象的方法

1.从头创建一个FormData对象可以创建一个自己的FormData对象，然后通过append(key, value) 方法向对象中添加键值对，如：

var formdata = new FormData();
formdata.append(\'name\', \'李明\' );
formdata.appdnd(\'mobile\', 13222222222); //数字会被转换成字符串
2.使用已有的表单来初始化一个对象实例如已有表单：

<form id="_formData" method="post">

<input type="text" name="name">名字
<input type="password" name="psw">密码

</form>
var form = document.getElementById(\'_formData\'); //找到已有表单
var formFile = new FormData(form); // 生成FormData对象时指定表单元素
当然，可以给formFile用append添加参数，如：

formFile.append(\'mobile\', 17911111111);
三、可以通过set(key, value)来设置修改数据，如果指定的key不存在则会新增一条，如果存在，则会修改对应的value值

formFile.set(\'name\', \'李铭\')
has(key)：判断是否有对应的key值

delete(key)：删除数据

四、传送FormData对象数据，可用xhr传

var xhr = new XMLHttpRequest();
xhr.open(\'post\', \'/user/login\');
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(formData);
注意，发送时，hender的content-Type需为：application/x-www-form-urlencoded该方式可实现文件的异步上传

五、实际应用案例

org前后端分离，运营端视频课/直播课的批量导入成员页面，原来点【确定】提交数据时，用的是表单提交，并由后端给页面分配导入结果数据。分离时需要通过ajax的方式，拿到后端返回的导入统计结果数据操作DOM元素，用FormData对象可以把表单数据通过ajax方式传给后端，拿到返回的结果，这样用尽量少的处理达到了目的。主要代码：

let form=document.getElementById(\'_formData\')
let fileForm = new FormData(form)

this.axios({
url: \'...import...\',
method: \'POST\',
headers: {
\'Content-Type\': \'application/x-www-form-urlencoded\'
},
data: fileForm
})
.then(response => {
// 返回后的处理
})