学学文件对象

平时开发项目，很少做对二进制数据的处理，最多就是上传下载，大部分也都是直接实现功能，不会自己处理二进制对象。比如现在视频直播比较火的flv.js库，就是通过原生js解码数据，底层还是基于二进制。

今天大概学一学几个概念：
Blob、File、Buffer、ArrayBuffer、FileReader、TypedArray、DataView、MIME

这几个应该是我们处理文件会用到的原生对象，大概先了解一下：
Blob：Blob 对象表示一个不可变、原始数据的类文件对象。是js专门用来操作文件的对象。
File：继承于Blob，是特殊类型的 Blob，且可以用在任意的 Blob 类型的 context 中。
Buffer：node.js中定义的用来创建一个专门存放二进制数据的缓存区。
ArrayBuffer：表示通用的、固定长度的原始二进制数据缓冲区。
FileReader：允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。
TypedArray：一个类型化数组对象描述了一个底层的二进制数据缓冲区的一个类数组视图。
DataView：视图是一个可以从二进制ArrayBuffer 对象中读写多种数值类型的底层接口。
MIME：媒体类型用来表示文档、文件或字节流的性质和格式。比如text/html、image/png、application/javascript、video/mp4。

有点难理解，大概串联起来都是围绕Blob展开。Blob是前端操作二进制数据的核心，File对象继承Blob。FileReader对象接收Blob对象（File对象当然也符合）,可以转化成其它内容数据。Buffer和ArrayBuFfer一个是node环境下使用一个是浏览器环境使用，都是一个数据缓冲区，可以由FileReader或者Blob直接转化而来，不能直接操作，也可以说本身只能读不能写，只能通过类型数组对象TypedArray和视图对象DataView来操作，这两个对象是专门用来操作ArrayBuffer的。

这几个对象的属性和方法MDN上面都能找到，这边就不都罗列出来了，一些API当你需要使用的时候再去好好研究，直接上几个使用方法。

Blob/File(这两个其实不分家)：
来自用户input元素选择文件或者拖放操作的 DataTransfer对象，这个应该是我们最熟悉的对象了。
图片本地预览，URL.createObjectURL是一种伪协议Blob URL/Object URL，允许Blob和File对象创建一个唯一的URL，浏览器会生成一个URL对Blob的映射，仅在当前文档打开状态下有效，浏览器无法释放留在内存中的Blob，就算你不引用映射的URL和Blob，除非文档卸载。当然，可以调用URL.revokeObjectURL(url)方法删除，本人是从来没有删除过：

<input type="file" accept="image/*" onchange="loadFile(event)">
<img id="output"/>

const loadFile = function(event) {
    const output = document.querySelector('#output');
    output.src = URL.createObjectURL(event.target.files[0]);
};

生成的地址是：blob:http://localhost:63342/3b84f365-a0a3-4148-940a-095eac4597b0

模拟a链接点击下载：

const download = (fileName, blob) => {
    const link = document.createElement("a");
    link.href = URL.createObjectURL(blob);
    link.download = fileName;
    link.click();
    link.remove();
    URL.revokeObjectURL(link.href);
};

function load(){
    const fileName = "blob.txt";
    const myBlob = new Blob(["blob对象"], { type: "text/plain" });
    download(fileName, myBlob);
}

或者下载选取的文件，这一般是不会操作的，就在上面的loadFile里面加：
download(event.target.files[0].name, event.target.files[0])
也可以下载后台返回的文件流，设置响应的responseType为blob，然后创建一个Blob实现模拟a链接点击下载：
download(fileName, new Blob([response.data]);

顺便说一嘴，之前有个需求是给你下载接口，模拟a标签点击不能实现，所以模拟了form表单提交下载，这跟Blob和File没有关系：

var form = document.createElement('form')
form.id = 'form'
form.name = 'form'
document.body.appendChild (form);
var input = document.createElement('input')
input.tpye='hidden'
input.name = 'ids';
input.value = ids.join(',');
form.appendChild(input)
form.method = "GET"
form.action = 't'
form.submit()
document.body.removeChild(form)

FileReader：
把Blob转成其他格式的数据，主要是三个方法readAsText（转化成文本）、readAsArrayBuffer把Blob转成ArrayBuffer、readAsDataURL把Blob转成Base64

<input type="file" accept="image/*" onchange="loadFile(event)">
<img id="output"/>

const loadFile = function(event) {
    const reader = new FileReader();
    reader.onload = function(){
        const output = document.querySelector('#output');
        output.src = reader.result;
    };
    reader.readAsDataURL(event.target.files[0]);
};

可以改变这个方法看看打印出来的东西，其中base64可以直接显示图片，这样，显示图片就有两种方法。

ArrayBuffer、TypedArray、DataView：
好像没什么好的例子可以使用，就是通过别的转成这个对象，本身不能写，只能读。而TypedArray、DataView只是用来操作ArrayBuffer，这个就不举例子了，因为用到这个的估计都是一些编码解码的功能。

也就大概理一下这些对象，一般用到的也就是上传下载和显示图片。

猜你喜欢