笔者之前遇了好几处需要处理文件流的场景,以及互相转换,这边深入的学习了一下它们的概念,区别以及互相转换,阅读本文你将了解前端常见的文件流格式,以及相互转换的思路。
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实现。