Blob是什么
在JavaScript中，Blob（二进制大对象）对象是一种用于表示原始数据的类文件对象，它存储了任意类型的数据，通常是二进制数据，但也可以包含文本数据或其他格式的数据。Blob对象通常用于在客户端浏览器中处理二进制数据，比如文件上传、数据传输等场景。（Blob对象可以将任意类型的数据转换为二进制形式进行存储和处理。这使得Blob对象成为处理各种数据类型的有效工具，包括文本、图像、音频、视频等。在JavaScript中，Blob对象提供了一种统一的接口来处理这些数据，无论是从用户上传的文件中获取数据，还是从其他来源获取数据，都可以使用Blob对象来进行二进制处理。）
Blob的用途
Blob对象常见的使用情况包括：
文件上传：当用户通过网页上传文件时，浏览器会创建一个Blob对象来表示上传的文件数据，然后可以将该Blob对象发送到服务器端进行处理。
数据传输：在客户端与服务器端进行数据交互时，可以使用Blob对象来存储和传输二进制数据，例如通过XMLHttpRequest或Fetch API发送Blob对象。
图像处理：在客户端对图像进行处理时，可以将图像数据存储在Blob对象中，并通过Canvas API等技术进行操作和显示。
媒体处理：在处理音频或视频等媒体数据时，可以使用Blob对象来存储和处理媒体数据。
和file文件流的关系
以下是Blob对象和File对象之间的联系和区别：
Blob对象：
Blob对象是二进制数据的容器，可以包含任意类型的数据，如文本、图像、音频或视频等。
可以通过构造函数new Blob(data, options)创建 Blob 对象，其中data是包含数据的数组或数组缓冲区，options是一个可选对象，用于指定 Blob 的 MIME 类型和结束符等信息。File对象：
File对象是Blob对象的一种扩展，通常用于表示用户系统中的文件，具有文件名和最后修改日期等属性。
可以通过new File(data, name, options)构造函数创建 File 对象，其中data是包含数据的数组或数组缓冲区，name是文件名，options是一个可选对象，用于指定文件的 MIME 类型和最后修改日期等信息。
联系与区别：
File对象是Blob对象的子类，因此所有可以对Blob对象执行的操作也同样适用于File对象。
File对象在表示文件时具有额外的元数据，如文件名和最后修改日期等。
在实际使用中，Blob对象通常用于处理二进制数据，而File对象则用于处理用户系统中的文件，如文件上传和操作。
因此，可以说File对象是Blob对象的一种特殊情况，用于在JavaScript中表示用户系统中的文件，并提供了额外的文件相关的属性。
Blob和File文件流，base64的转化
Blob对象转文件： 可以使用File构造函数将Blob对象转换为文件对象。File构造函数接受一个Blob对象和一个文件名作为参数，然后返回一个文件对象。
var blob = new Blob(["blob data"], { type: "text/plain" });
var file = new File([blob], "filename.txt");
Blob对象转Base64： 可以使用FileReader对象将Blob对象转换为Base64编码的字符串。FileReader对象可以读取Blob对象中的数据，并以指定的编码格式输出。
var blob = new Blob(["blob data"], { type: "text/plain" });
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = function () {
var base64String = reader.result;
};
Base64转Blob对象： 可以将Base64编码的字符串转换回Blob对象。这可以通过创建一个新的Blob对象并指定Base64字符串的数据类型完成。
var base64String = "base64 data";
var byteCharacters = atob(base64String);
var byteNumbers = new Array(byteCharacters.length);
for (var i = 0; i < byteCharacters.length; i++) {
byteNumbers[i] = byteCharacters.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
var blob = new Blob([byteArray], { type: "image/jpeg" });
参考
https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader/readAsDataURL
https://developer.mozilla.org/zh-CN/docs/Web/API/Blob
