在向后端请求时,如果上传的数据里存在file文件对象,需要用到表单提交,这时候我们需要将JSON对象,转成formData对象,具体见代码
const formData = new FormData();
Object.keys(params).forEach((key) => {
formData.append(key, params[key]);
});
使用formData.entries():FormData.entries() 方法返回一个 iterator对象 ,此对象可以遍历访问FormData中的键值对。其中键值对的key是一个 USVString 对象;value是一个 USVString , 或者 Blob对象。
// Create a test FormData object
var formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');
// Display the key/value pairs
for(var pair of formData.entries()) {
console.log(pair[0]+ ', '+ pair[1]);
}
下面也有可能需要formData转JSON,代码如下:
var jsonData = {};
formData.forEach((value, key) => jsonData[key] = value);
在前后分离开发中,经常会遇到上传文件的情况,后端会有一个文件上传接口,通过ajax上传成功后返回图片地址url给前端。
FormData类型是XMLHttpRequest 2级定义的,它是为序列化表以及创建与表单格式相同的数据提供便利。 作用:1.利用一些键值对来模拟一系列表单控件:即将form中的所有表单元素的name和value组装成一个queryString;2.异步上传二进制文件。
serialize()和new FormDate()javascript序列化表单的方法,所谓序列化表单就是讲form表单中所有name属性序列化成KEY-VALUE的形式,提交到后台,后台以对象相应的字段接收。
很多时候需要利用formdata数据格式进行前后端交互。前端代码可以是如下所示:上面代码不仅有直接生成的formdata数据,还有利用append添加的。后端应该怎么接收?
formData是ajax2.0(XMLHttpRequest Level2)新提出的接口,利用FormData对象可以将form表单元素的name与value进行组合,实现表单数据的序列化,从而介绍表单元素的拼接,提高工作效率
FormData接口提供了一种表示表单数据的键值对 name/value 的构造方式,能够将数据通过前端 Ajax 请求发送给后端。FormData的主要用途有两个。
Content-Type(内容类型),一般是指网页中存在的 Content-Type,用于定义网络文件的类型和网页的编码,决定浏览器将以什么形式、什么编码读取这个文件
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!