笔者之前遇了好几处需要处理文件流的场景，以及互相转换，这边深入的学习了一下它们的概念，区别以及互相转换，阅读本文你将了解前端常见的文件流格式，以及相互转换的思路。
1.概念
File
一般情况之下File对象是input标签选择文件之后的FileList对象，也可以是也可以是来自由拖放操作生成的 DataTransfer 对象，或者来自 HTMLCanvasElement 上的 mozGetAsFile() API。
File是特殊的Blob，可以处理Blob的函数必然可以处理Blob，比如说， FileReader, URL.createObjectURL(), createImageBitmap() (en-US), 及 XMLHttpRequest.send() 都能处理 Blob和 File。
总结:File是一个特殊的Blob对象。具体API参见MDN File
Base64
Base64是一种由64个可打印字符组成的对二进制编码的规则（binary-to-text）
Base64解决了什么问题？
Base64就是为了解决各系统以及传输协议中二进制不兼容的问题而生的。为什么Base64能实现兼容呢？主要还是因为各家系统只能保证ASIIC的基础字符，所以Base64就是取了其中的64个 参见MDN Base64。
Base64的算法：
1.将原始数据每三个字节作为一组，每个字节是8个bit，所以一共是 24 个 bit
2.将 24 个 bit 分为四组，每组 6 个 bit
3.在每组前面加补 00，将其补全成四组8个bit，到此步，原生数据的3个字节已经变成4个字节了，增大了将近30%
4.根据Base64码表得到扩展后每个字节的对应符号
小tips：
关于Base64结尾的’=‘，而且有时候是一个有时候是两个，这是因为base64是以三个字符为一组，所以当不满三个的时候就会用’=‘补，缺一个补一个’=‘，缺两个补两个’=’。
其实在实际开发中，我们得到的是DataURL前面一般会有data:image/jpeg;base64,需要注意的是,之后的才是真正的数据。
Blob
Blob是一个表示不可变，原始数据的文件对象，它的数据可以按文本或者二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作。 具体API参见MDN Blob
可以用Blob实现对大文件进行分片上传。
ArrayBuffer
ArrayBuffer 对象用来表示通用的、固定长度的原始二进制数据缓冲区。
它是一个字节数组，通常在其他语言中称为“byte array”。
而ArrayBuffer 的内容不能直接被操作 ，而是要通过类型数组对象或 DataView 对象来操作，将缓冲区中的数据表示为特定的格式，并通过这些格式来读写缓冲区的内容。
2.互相转换
在日常开发中我们经常遇到一些api或者组件对文件类型有要求，只这时候就需要对这些文件类型进行转化。
在这在之前先介绍一下一个JS BOM API FileReader
FileReader可以读取Blob对象所以同时也能读取File对象，并且FileReader提供了输出ArrayBuffer Base64的接口。
下面直接贴一些转换代码：
File转Base64：
let reader = new FileReader();
reader.readAsDataURL(file[0])
console.log(reader)
Base64转Blob：
const dataURItoBlob = (dataURI) => {
var byteString = atob(dataURI.split(',')[1]);
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ab], {type: mimeString});
}
Blob转ArrayBuffer：
let blob = new Blob([1,2,3,4])
let reader = new FileReader();
reader.onload = function(result) {
console.log(result);
}
reader.readAsArrayBuffer(blob);
Buffer转Blob：
let blob = new Blob([buffer])
Base64转File:
const base64ConvertFile = function (urlData, filename) {
if (typeof urlData != 'string') {
return;
}
var arr = urlData.split(',')
var type = arr[0].match(/:(.*?);/)[1]
var fileExt = type.split('/')[1]
var bstr = atob(arr[1])
var n = bstr.length
var u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], 'filename.' + fileExt, {
type: type
});
}
总结：
前端常见的文件流格式有Blob File Base64 ArrayBuffer，其中File是特殊的Blob对象,大部分转换都可以通过JS BOM API FileReader实现。