Blob Base64 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 是一个表示不可变，原始数据的文件对象，它的数据可以按文本或者二进制的格式进行读取，也可以转换成 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实现。