浅谈JS的二进制家族
概述
blob: 前端的一个专门用于支持文件操作的二进制对象
arraybuffer:前端的一个通用的二进制缓冲区,类似数组,但在api和特性上却有诸多不同
buffer:node.js提供的一个二进制缓冲区,常用来处理i/o操作
blob
我们首先来介绍blob,blob是用来支持文件操作的。简单的说:在js中,有两个构造函数 file 和 blob, 而file继承了所有blob的属性。
所以在我们看来,file对象可以看作一种特殊的blob对象。
在前端工程中,我们在哪些操作中可以获得file对象呢? 请看:
(备注:目前 file api规范的状态为working draft)
我们上面说了,file对象是一种特殊的blob对象,那么它自然就可以直接调用blob对象的方法。让我们看一看blob具体有哪些方法,以及能够用它们实现哪些功能
blob实战
通过window.url.createobjecturl方法可以把一个blob转化为一个blob url,并且用做文件下载或者图片显示的链接。
blob url所实现的下载或者显示等功能,仅仅可以在单个浏览器内部进行。而不能在服务器上进行存储,亦或者说它没有在服务器端存储的意义。
下面是一个blob的例子,可以看到它很短
blob:d3958f5c-0777-0845-9dcf-2cb28783acaf
和冗长的base64格式的data url相比,blob url的长度显然不能够存储足够的信息,这也就意味着它只是类似于一个浏览器内部的“引用“。从这个角度看,blob url是一个浏览器自行制定的一个伪协议
blob下载文件
我们可以通过window.url.createobjecturl,接收一个blob(file)对象,将其转化为blob url,然后赋给 a.download属性,然后在页面上点击这个链接就可以实现下载了
<!-- html部分 --> <a id="h">点此进行下载</a> <!-- js部分 --> <script> var blob = new blob(["hello world"]); var url = window.url.createobjecturl(blob); var a = document.getelementbyid("h"); a.download = "helloworld.txt"; a.href = url; </script>
备注:download属性不兼容ie, 对ie可通过window.navigator.mssaveblob方法或其他进行优化(ie10/11)
运行结果
blob图片本地显示
window.url.createobjecturl生成的blob url还可以赋给img.src,从而实现图片的显示
<!-- html部分 --> <input type="file" id='f' /> <img id='img' style="width: 200px;height:200px;" /> <!-- js部分 --> <script> document.getelementbyid('f').addeventlistener('change', function (e) { var file = this.files[0]; const img = document.getelementbyid('img'); const url = window.url.createobjecturl(file); img.src = url; img.onload = function () { // 释放一个之前通过调用 url.createobjecturl创建的 url 对象 window.url.revokeobjecturl(url); } }, false); </script>
运行结果
blob文件分片上传
- 通过blob.slice(start,end)可以分割大blob为多个小blob
- xhr.send是可以直接发送blob对象的
前端
<!-- html部分 --> <input type="file" id='f' /> <!-- js部分 --> <script> function upload(blob) { var xhr = new xmlhttprequest(); xhr.open('post', '/ajax', true); xhr.setrequestheader('content-type', 'text/plain') xhr.send(blob); } document.getelementbyid('f').addeventlistener('change', function (e) { var blob = this.files[0]; const chunk_size = 20; . const size = blob.size; var start = 0; var end = chunk_size; while (start < size) { upload(blob.slice(start, end)); start = end; end = start + chunk_size; } }, false); </script>
node端
app.use(async (ctx, next) => { await next(); if (ctx.path === '/ajax') { const req = ctx.req; const body = await parse(req); ctx.status = 200; console.log(body); console.log('---------------'); } });
文件内容
according to the zhanjiang commerce bureau, the actual amount of foreign capital utilized in zhanjiang from january to october this year was
运行结果
本地读取文件内容
如果想要读取blob或者文件对象并转化为其他格式的数据,可以借助filereader对象的api进行操作
- filereader.readastext(blob):将blob转化为文本字符串
- filereader.readasarraybuffer(blob): 将blob转为arraybuffer格式数据
- filereader.readasdataurl(): 将blob转化为base64格式的data url
下面我们尝试把一个文件的内容通过字符串的方式读取出来
<input type="file" id='f' /> document.getelementbyid('f').addeventlistener('change', function (e) { var file = this.files[0]; const reader = new filereader(); reader.onload = function () { const content = reader.result; console.log(content); } reader.readastext(file); }, false);
运行结果
上面介绍了blob的用法,我们不难发现,blob是针对文件的,或者可以说它就是一个文件对象,同时呢我们发现blob欠缺对二进制数据的细节操作能力,比如如果如果要具体修改某一部分的二进制数据,blob显然就不够用了,而这种细粒度的功能则可以由下面介绍的arraybuffer来完成。
arraybuffer
让我们用一张图看下arraybuffer的大体的功能
同时要说明,arraybuffer跟js的原生数组有很大的区别,如图所示
下面一一进行细节的介绍
通过arraybuffer的格式读取本地数据
document.getelementbyid('f').addeventlistener('change', function (e) { const file = this.files[0]; const filereader = new filereader(); filereader.onload = function () { const result = filereader.result; console.log(result) } filereader.readasarraybuffer(file); }, false);
运行结果
通过arraybuffer的格式读取ajax请求数据
通过xhr.responsetype = "arraybuffer" 指定响应的数据类型
在onload回调里打印xhr.response
前端
const xhr = new xmlhttprequest(); xhr.open("get", "ajax", true); xhr.responsetype = "arraybuffer"; xhr.onload = function () { console.log(xhr.response) } xhr.send();
node端
const app = new koa(); app.use(async (ctx) => { if (pathname = '/ajax') { ctx.body = 'hello world'; ctx.status = 200; } }).listen(3000)
运行结果
通过typearray对arraybuffer进行写操作
const typedarray1 = new int8array(8); typedarray1[0] = 32; const typedarray2 = new int8array(typedarray1); typedarray2[1] = 42; console.log(typedarray1); // output: int8array [32, 0, 0, 0, 0, 0, 0, 0] console.log(typedarray2); // output: int8array [32, 42, 0, 0, 0, 0, 0, 0]
通过dataview对arraybuffer进行写操作
const buffer = new arraybuffer(16); const view = new dataview(buffer); view.setint8(2, 42); console.log(view.getint8(2)); // 输出: 42
buffer
buffer是node.js提供的对象,前端没有。 它一般应用于io操作,例如接收前端请求数据时候,可以通过以下的buffer的api对接收到的前端数据进行整合
buffer实战
例子如下:
node端(koa)
const app = new koa(); app.use(async (ctx, next) => { if (ctx.path === '/ajax') { const chunks = []; const req = ctx.req; req.on('data', buf => { chunks.push(buf); }) req.on('end', () => { let buffer = buffer.concat(chunks); console.log(buffer.tostring()) }) } }); app.listen(3000)
前端
const xhr = new xmlhttprequest(); xhr.open("post", "ajax", true); xhr.setrequestheader('content-type', 'text/plain') xhr.send("asdasdsadfsdfsadasdas");
运行结果
node端输出
asdasdsadfsdfsadasdas
以上就是浅谈js的二进制家族的详细内容,更多关于js的二进制家族的资料请关注其它相关文章!
上一篇: 幽默的漫谈男女,所言不虚
下一篇: 你哪里坏