前后端传参：掌握FormData并解决form-data类型传参问题

目录

第一章 解决问题过程

第二章 对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的第一个value
• formData.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）会自动为你生成和处理这些边界和分隔符。