FormData对象

Posted 2023-03-22

参考技术A 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样式即可

JSON对象转成formData对象,formData对象转成JSON对象

在向后端请求时，如果上传的数据里存在file文件对象，需要用到表单提交，这时候我们需要将JSON对象，转成formData对象，具体见代码

 

const formData = new FormData();
Object.keys(params).forEach((key) =>
formData.append(key, params[key]);
);

 

下面也有可能需要formData转JSON，代码如下：

var jsonData = ;
formData.forEach((value, key) => jsonData[key] = value);