最近在开发过程中，需要发送一些复杂的数据结构，而不仅仅是简单的文本或文件。在这种情况下，Blob对象结合FormData就可以为我们提供强大的支持。
一、引言
随着 Web 应用的不断发展，前端与后端之间的数据交互变得越来越复杂。传统的表单提交方式可能无法满足我们对于发送复杂数据结构的需求。这时，Blob对象和FormData的组合为我们提供了一种灵活且强大的解决方案。
二、什么是 Blob 和 FormData？
（一）Blob 对象
Blob（Binary Large Object）对象代表二进制数据。它可以存储任何类型的二进制数据，如图像、音频、视频、文本文件等。Blob对象通常是通过对其他数据类型进行转换得到的，例如将字符串转换为Blob对象，或者将文件读取为Blob对象。
（二）FormData 对象
FormData是一种用于模拟表单提交的对象。它可以包含文本字段、文件、以及其他数据类型。FormData对象通常用于通过XMLHttpRequest或fetch进行表单数据的发送。
三、为什么要在 FormData 中使用 Blob？
（一）发送复杂数据结构
FormData本身可以包含简单的文本字段和文件，但对于一些复杂的数据结构，如包含嵌套对象或数组的 JSON 对象，直接添加到FormData中可能会比较困难。通过将复杂数据结构转换为Blob对象，我们可以轻松地将其添加到FormData中进行发送。
（二）兼容性
FormData和Blob对象在大多数现代浏览器中都得到了很好的支持，这使得我们可以在不同的浏览器环境中使用这种方法进行数据发送。
四、如何在 FormData 中使用 Blob 发送复杂数据结构？
（一）将复杂数据结构转换为 Blob 对象
首先，我们需要将复杂的数据结构转换为Blob对象。假设我们有一个包含嵌套对象和数组的 JSON 对象：
const complexData = {
name: 'John',
age: 30,
hobbies: ['reading', 'coding'],
address: {
city: 'New York',
country: 'USA'
}
};
我们可以使用JSON.stringify()方法将这个 JSON 对象转换为字符串，然后使用Blob构造函数将字符串转换为Blob对象：
const jsonString = JSON.stringify(complexData);
const blob = new Blob([jsonString], { type: 'application/json' });
（二）创建 FormData 对象并添加 Blob
接下来，我们创建一个FormData对象，并将Blob对象添加到其中：
const formData = new FormData();
formData.append('data', blob);
在这个例子中，我们将Blob对象添加到FormData中，并使用data作为键名。你可以根据实际情况选择合适的键名。
（三）发送 FormData
最后，我们可以使用XMLHttpRequest或fetch来发送FormData对象到服务器：
fetch('/submit', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
在服务器端，你可以根据需要解析FormData中的Blob对象，获取其中的复杂数据结构。
五、注意事项
（一）设置正确的 MIME 类型
在创建Blob对象时，需要设置正确的 MIME 类型。如果是 JSON 数据，通常设置为application/json。如果是其他类型的数据，需要根据实际情况设置相应的 MIME 类型。
（二）服务器端处理
在服务器端，需要根据接收到的数据类型进行正确的处理。如果是FormData中的Blob对象，需要使用适当的方法来解析其中的数据。
六、总结
通过使用Blob对象在FormData中发送复杂的数据结构，我们可以更加灵活地与服务器进行数据交互。这种方法不仅可以处理简单的文本和文件，还可以处理包含嵌套对象和数组的复杂 JSON 对象。在实际应用中，我们可以根据具体的需求选择合适的方法来发送数据，提高前端与后端之间的数据交互效率。
