File、Blob 和 base64 是处理二进制数据时常见的三种数据类型，它们在Web开发中有着不同的用途和特点：
Blob (Binary Large Object)：
Blob 是一个不可变的、原始数据的对象，表示不可变的、原始数据的类文件对象。Blob 可以被看作是二进制文件的抽象，它可以用来表示图片、视频、音频等文件。
Blob 对象可以被用来创建一个 File 对象，但是 Blob 本身并不是一个文件，而是一个文件的二进制数据表示。
Blob 可以被用来通过 URL.createObjectURL() 创建一个临时的URL，这个URL可以被用来在浏览器中引用这个 Blob 对象，例如在 <img> 标签的 src 属性中使用。
File：
File 是 Blob 的一个子类型，它表示一个文件对象。File 对象包含 Blob 的所有功能，并且增加了一些文件特有的属性，如 name 和 lastModified（文件名和最后修改时间）。
File 对象通常用于表示用户通过 <input type="file"> 选择的文件，或者拖拽到页面上的文件。
File 对象可以被用来上传到服务器，因为它包含了文件的元数据。
Base64：
base64 是一种编码方法，用于将二进制数据转换成ASCII字符串。这种编码通常用于在不支持二进制数据的上下文中传输二进制数据，例如在URLs、Cookie、HTML和XML中。
base64 编码的数据比原始的二进制数据要大（大约33%），因为它使用64个字符来表示每个6位的二进制数据块。
base64 编码的数据可以通过 atob() 和 btoa() 函数在JavaScript中进行编码和解码。
base64 编码的数据可以被用来在HTML中直接嵌入图片数据，例如在 <img> 标签的 src 属性中使用。
区别：
数据表示：Blob 和 File 是二进制数据的原始表示，而 base64 是二进制数据的文本表示。
大小：Blob 和 File 通常比对应的 base64 编码的数据要小，因为 base64 编码包含额外的字符。
用途：Blob 和 File 用于表示原始的二进制数据，适合文件上传、下载等操作；base64 编码的数据适合在文本环境中嵌入和传输二进制数据。
性能：处理 Blob 和 File 对象通常比处理 base64 编码的数据更高效，因为不需要额外的编码和解码步骤。
兼容性：Blob 和 File 对象在现代浏览器中得到了很好的支持，而 base64 编码的数据在所有支持文本的上下文中都可以使用。
最近项目中需要实现把图片的base64编码转成file文件的功能，然后再上传至服务器。因为上传图片会得到base64, base64太大，直接上传到服务器不太友好，所以转成file后再传给后端。
base64转为file
方法一：通过new File()将base64转换成file文件，此方式需考虑浏览器兼容问题：
首先, 需要从 base64 字符串中获取文件类型, 然后将文件类型和 base64 字符串转换为 Blob 对象。最后, 使用 Blob 对象构造函数创建一个 File 对象。
下面是一个示例函数，它接收一个 base64 字符串和文件名，并返回一个 File 对象:
function base64ToFile(base64, filename = 'file') {
let arr = base64.split(",");
let mime = arr[0].match(/:(.*?);/)[1];
let bstr = atob(arr[1]);
let n = bstr.length;
let u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], fileName, { type: mime });
}需要注意的是， atob 和 Uint8Array 是在所有现代浏览器中都可用的。在旧浏览器中，需要使用其它库来替代这两个函数。
如果需要在使用这个函数之前检查文件类型是否支持，可以在函数中增加文件类型校验的代码。
案例：将File转化为图片的URL后下载
const blob = base64ToFile(dataurl)
const blobUrl = window.URL.createObjectURL(blob);
// 这里的文件名根据实际情况从响应头或者url里获取
const filename = blob.name;
const a = document.createElement('a');
a.href = blobUrl;
a.download = filename;;
a.click();
window.URL.revokeObjectURL(blobUrl);方法二、先将base64转换成blob，再将blob转换成file文件，此方法不存在浏览器不兼容问题：
在 JavaScript 中，可以使用 Blob 对象将 base64 字符串转换为二进制数据对象 Blob。
首先，使用 atob() 函数将 base64 字符串解码为二进制字符串。然后，使用 Uint8Array 构造函数将二进制字符串转换为字节数组。最后，使用 Blob 构造函数，将字节数组作为第一个参数，创建一个新的 Blob 对象。
1、先将 base64 转换为 Blob：
// 将 base64 转换为 Blob
function base64ToBlob(base64) {
var arr = base64.split(","),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {
type: mime,
});
}使用类似这样的方式构造出来的 Blob 对象就可以按照二进制文件的方式来使用，可以作为参数传入 FileReader, 通过 FormData 对象上传到服务器等。
需要注意的是, atob 和 Uint8Array 是在所有现代浏览器中都可用的。在旧浏览器中，需要使用其它库来替代这两个函数。
如果需要在使用这个函数之前检查文件类型是否支持，可以在函数中增加文件类型校验的代码。
另外，在 HTML5 中,可以使用 canvas 元素的 toBlob()方法 将图片转换为 Blob 对象，这个方法是基于 HTMLCanvasElement 元素的, 可以将一张图片转成 base64 后，再使用 canvas 的方法将图片绘制在 canvas 元素上，然后使用 toBlob() 方法获取到 Blob 对象。
还有一些第三方库，比如 FileSaver.js, 可以使用它来将 Blob 对象保存在本地。
这些方法都能达到相同的目的，可以根据项目中使用的 JavaScript 环境和需要的复杂度来进行选择
在 JavaScript 中，可以使用 File 构造函数将一个 Blob 对象转换为一个 File 对象。
这个构造函数接收两个参数: 第一个参数是一个 Blob 或者 ArrayBuffer 对象，第二个参数是文件的名字。
2、再将 Blob 转换为 File：
function blobToFile(blob, fileName) {
return new File([blob], fileName);
}由于 Blob 是 File 的超集， 所以可以直接将 Blob 对象转换为 File 对象, 这样就可以使用 File 对象的各种方法，例如获取文件名、类型等。
由于这个是新的 API, 可能在部分浏览器上不能使用, 也可以使用第三方库来兼容在旧浏览器上使用。
vue中配合vant的uploader上传组件使用案例：
/* 单个文件上传案例 */
afterRead(file) {
// 1.先转为 blob格式 file.content是此文件的base64格式
let blob = this.dataURLtoBlob(file.content);
// 拿到文件名
let fileName = file.file.name;
// 2，在转为 file类型
let file1 = this.blobToFile(blob,fileName);
console.log("file1:",file1);
// 3,上传...
},
