前后端传参：掌握FormData并解决form

2024-07-09 09:36| 来源: 网络整理| 查看: 265

第一章解决问题过程

第二章对form-data的理解

2.1 使用场景

2.2 了解formData对象的创建与使用

2.3 formData常用方法

2.3.1 构造函数

2.3.2 获取数据

2.3.3 添加数据

2.3.4 修改数据

2.3.5 检查是否有该数据

2.3.6 删除数据

2.3.7 遍历formData里的键值对

第三章前端配置请求头

第一章解决问题过程后端要求传参的类型：form-data类型，接收参数的形式：

问题：前端不知道如何传参才能满足后端的要求坑是一步一步填的==、(难受)

-- 配置没有问题:

-- 第一次笨用法，以为直接传参就可以了，殊不知formData这么写是输出是一个空对象

-- 第二次笨用法，这次用这种方法是可以拿到file的值了，但是查看请求接口时，并没有给我们解析出来，还有其实这种传参方式是post、json的传参方法，是一个对象的形式

经过试错最终找到解决办法！！解决方法：

第二章对form-data的理解 2.1 使用场景

最常用的两种情况——异步上传文件、将form表单元素的name与value进行组合，实现表单数据的序列化，从而减少表单元素的拼接，提高工作效率以及参数中既有二进制流的键值对也有正常的键值对

2.2 了解formData对象的创建与使用 //通过FormData构造函数创建一个空对象 const formdata=new FormData(); console.log('formdata',formdata) //可以通过append()方法来追加数据,文件二进制流添加都是该方法 formdata.append("name","VE"); //通过get方法对值进行读取 console.log(formdata.get("name")); //通过set方法对值进行设置 formdata.set("name","*VE*"); console.log(formdata.get("name"));

2.3 formData常用方法 2.3.1 构造函数方法一：创建一个空对象实例（场景一）

利用new关键字创建一个空的 FormData 对象，然后使用 append() 方法向该对象里添加字段（字段的值可以是一个 Blob 对象，File对象或者字符串，剩下其他类型的值都会被自动转换成字符串）。

const formData = new FormData(); 方法二：使用已有的表单来初始化一个对象实例（场景二）名字密码 // 获取页面已有的一个form表单 const form = document.getElementById("myForm"); // 用表单来初始化 const formData = new FormData(form); // 我们可以根据name来访问表单中的字段 const name = formData.get("name"); // 获取名字 const psw = formData.get("psw"); // 获取密码 // 当然也可以在此基础上，添加其他数据 formData.append("token","this is token value"); 2.3.2 获取数据 formData.get('key')：获取键为key的第一个valueformData.getAll('key')：获取对应键为key的所有value const formData=new FormData(); //通过append()方法来追加数据 formData.append("name","VE"); formData.append("name","VE1"); formData.append("name","VE2"); console.log(formData.get("name"), formData.getAll("name")); 2.3.3 添加数据两个参数：formData.append(key，value)：键：key，值：value formData.append("name","VE"); 三个参数：formData.append(key，blob/File， filename) —— 键：key，blob/File：二进制流，filename：文件名 formData.append('file', blob, Date.now() + '.png') 2.3.4 修改数据 formData.set(key, value)：设置修改数据，如果指定的key不存在则会新增一条，如果存在，则会修改对应的value值 //通过FormData构造函数创建一个空对象 const formData=new FormData(); //可以通过append()方法来追加数据 formData.append("name","VE"); formData.append("name","VE1"); formData.append("name","VE2"); //通过set方法对值进行设置 formData.set("name","*VE*"); formData.set("sex","男"); console.log(formData.get("name"), formData.get("sex")); 修改之前

修改之后

2.3.5 检查是否有该数据 formData.has('key')：判断是否有对应的key值 console.log(formData.has("name"), formData.has("ab"))

2.3.6 删除数据 formData.delete('key')：删除对应key的值

2.3.7 遍历formData里的键值对 formData.entries()：获取一个迭代器，然后利用.next()遍历所有的数据

每调用一次next()返回一条数据，数据的顺序由添加的顺序决定，如果同一个key有多个value，也是一个一个输出，而不是将值作为一个数组输出出来 done属性为true时，说明已经遍历完所有的数据

第三章前端配置请求头 headers: { 'Content-Type': 'multipart/form-data;boundary=----WebKitFormBoundaryk4ZvuPo6pkphe7Pl' }multipart/form-data 是文件传输的content-type 格式，为了上传文件，等二进制流在使用 multipart/form-data 格式进行数据提交时，每个请求体的部分（part）都需要有一个唯一的分隔符（boundary）来标识不同的部分。这个分隔符是由客户端生成并在请求头中指定的一般情况下，我们前端开发不需要需手动指定分隔符，因为大多数 HTTP 客户端库（如浏览器内置的 XMLHttpRequest、Fetch 或第三方库如 axios）会自动为你生成和处理这些边界和分隔符。

【本文地址】

公司简介

联系我们