一、简单介绍
blob是原始的也是用的最多的；
file是input拿到的时候这个格式，从blob继承而来；
base64类似于string那种，可以传输方便直接用于图像展示，而blob是原始的。
一般base64用于图像展示，而blob、file用于文件上传。
二、具体区别
formData就是将form表单元素的name和value进行组合，实现表单数据的序列化，从而减少表单元素的拼接，提高工作效率。
Web API 提供了FormData方法，提供了一种表示表单数据的键值对的构造方式，通过FormData.append(key, value)向FormData中添加新的属性值。也可以使用已有的表单进行初始化（用form，拉下来new formdata（form 就有那些值）
base64是一种基于64个可打印字符来表示二进制数据的表达方法，它常用于处理文本数据的场合，表示、传输、存储一些二进制数据。
图片的base64编码就是将一张图片编码成一串字符串，使用该字符串可以代替图片地址，直接在浏览器打开是可以访问该图片的。[字符串！字符串！可以直接展示 】
Blob表示二进制类型的大对象，通常是影像、声音或多媒体文件，在JS中Blob类型的对象表示不可变的类似文件对象的原始数据。
三、互相转换
（1）file、blob转base64
我们从input那个框里，获取的肯定是原始的file类型；
然后，file传递给file reader，并且给readAsDataURL， 转换成base64
但凡转base64都大概类似如此
let file = document.getElementById("imagefile").files[0]
let reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = function () {
console.log(reader.result)
}
（2）
Base64转换为File
function dataURLtoFile(dataurl, filename) {
var arr = dataurl.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 File([u8arr], filename, { type: mime });
}
需要传两个参数，第一个是数据，第二个是自定义文件名字符串
转blob：
return new Blob([u8arr], { type: mime });
和转File基本一样，就最后一句return不一样
四、
Blob、FormData 和 File 是在 JavaScript 中处理二进制数据和文件上传的常用类型。它们之间的区别如下：
Blob（Binary Large Object）：Blob对象只有slice方法，对文件分割。全称是binary large object,二进制大文件对象，非Javascript特有，计算机通用对象，MDN上解释是，一个Blob对象就是一个包含有只读原始数据的类文件对象，通俗讲就是不可修改的二进制文件
Blob 是一种原始二进制数据类型，代表了不可变的类文件对象。
Blob 可以包含任何类型的数据，例如文本、图像、音频或视频。
Blob 对象通常由其他 API 或方法返回，如使用 fetch 方法获取服务器上的二进制数据。
可以通过构造函数 new Blob([data], [options]) 创建 Blob 对象。（前面是data后面是type）
FormData：
FormData 是一种专门用于表单数据和文件上传的数据类型。
FormData 可以包含键值对，其中键是字段名称，值是字段的值。
FormData 可以动态添加字段和值，并通过 XMLHttpRequest 或 Fetch API 发送到服务器。
FormData 还可以用于上传文件，通过 append 方法将文件添加到表单中。
File：
File 是继承自 Blob 的一种特殊类型，表示用户计算机上的文件。
File 与 Blob 类似，但还包含一些与文件相关的额外信息，如文件名和最后修改时间等。
在使用文件上传时，可以通过文件输入字段的 files 属性获取到一个包含用户选择的文件的 FileList 对象。
综上所述，Blob 是一种原始二进制数据类型，FormData 是用于表单数据和文件上传的数据类型，而 File 继承自 Blob，表示用户计算机上的文件，并包含一些与文件相关的额外信息。 \
另外还有一个，
antd文件上传样式太难用，自己写的：
我用的input的原生上传，然后把input隐藏掉，点击渲染部分地方则点击input。注意点击传入内容等于 inputRef.current?.click();这个操作是关键
const uploadImage = ({
sourceImage,
buttonContent,
}: {
sourceImage?: string;
buttonContent: React.ReactNode;
}) => {
const inputRef = useRef<HTMLInputElement>(null);
return (
<div className={cx("container")}>
<div
onClick={() => {
inputRef.current?.click();
}}
>
{buttonContent}
</div>
<input
ref={inputRef}
className={cx("hidden-full")}
type="file"
accept="image/jpg,image/jpeg,image/png"
id="ref-image"
onChange={(evt) => selecedImage(evt.target)}
/>
<Modal visible={visible} onCancel={() => setVisible(false)} >
<Cropper src={showBase64} />
</Modal>
</div>
const file = input.files![0];
input.value = "";
const url = URL.createObjectURL(file);
const blob = (await fileToBlob(file)) as Blob;
console.log(url, blob, "111");