浅谈JS的二进制家族


Posted in Javascript onMay 09, 2021

概述

Blob: 前端的一个专门用于支持文件操作的二进制对象

ArrayBuffer:前端的一个通用的二进制缓冲区,类似数组,但在API和特性上却有诸多不同

Buffer:Node.js提供的一个二进制缓冲区,常用来处理I/O操作

Blob

我们首先来介绍Blob,Blob是用来支持文件操作的。简单的说:在JS中,有两个构造函数 File 和 Blob, 而File继承了所有Blob的属性。

所以在我们看来,File对象可以看作一种特殊的Blob对象。

在前端工程中,我们在哪些操作中可以获得File对象呢? 请看:

浅谈JS的二进制家族

(备注:目前 File API规范的状态为Working Draft)

我们上面说了,File对象是一种特殊的Blob对象,那么它自然就可以直接调用Blob对象的方法。让我们看一看Blob具体有哪些方法,以及能够用它们实现哪些功能

浅谈JS的二进制家族

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)

运行结果

浅谈JS的二进制家族

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>

运行结果

浅谈JS的二进制家族

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

运行结果

浅谈JS的二进制家族

本地读取文件内容

如果想要读取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);

运行结果

浅谈JS的二进制家族

上面介绍了Blob的用法,我们不难发现,Blob是针对文件的,或者可以说它就是一个文件对象,同时呢我们发现Blob欠缺对二进制数据的细节操作能力,比如如果如果要具体修改某一部分的二进制数据,Blob显然就不够用了,而这种细粒度的功能则可以由下面介绍的ArrayBuffer来完成。

ArrayBuffer

让我们用一张图看下ArrayBuffer的大体的功能

浅谈JS的二进制家族

同时要说明,ArrayBuffer跟JS的原生数组有很大的区别,如图所示

浅谈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);

运行结果

浅谈JS的二进制家族

通过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)

运行结果

浅谈JS的二进制家族

通过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对接收到的前端数据进行整合

浅谈JS的二进制家族

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的二进制家族的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
A标签触发onclick事件而不跳转的多种解决方法
Jun 27 Javascript
使用CSS和jQuery模拟select并附提交后取得数据的代码
Oct 18 Javascript
jquery实现通用版鼠标经过淡入淡出效果
Jun 15 Javascript
用JavaScript实现对话框的教程
Jun 04 Javascript
jQuery鼠标事件总结
Oct 13 Javascript
关于Vue.js一些问题和思考学习笔记(2)
Dec 02 Javascript
js插件实现图片滑动验证码
Sep 29 Javascript
浅谈ES6 模板字符串的具体使用方法
Nov 07 Javascript
json字符串传到前台input的方法
Aug 06 Javascript
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
Aug 31 Javascript
玩转Koa之koa-router原理解析
Dec 29 Javascript
Vue 实现从文件中获取文本信息的方法详解
Oct 16 Javascript
如何使用vue3打造一个物料库
Ajax常用封装库——Axios的使用
May 08 #Javascript
微信小程序用户授权最佳实践指南
vue完美实现el-table列宽自适应
详解JS WebSocket断开原因和心跳机制
May 07 #Javascript
如何用threejs实现实时多边形折射
详解JS ES6编码规范
May 07 #Javascript
You might like
AM/FM收音机的安装与调试
2021/03/02 无线电
PHP安全防范技巧分享
2011/11/03 PHP
PHP生成数组再传给js的方法
2014/08/07 PHP
php实现删除空目录的方法
2015/03/16 PHP
PHP中把对象数组转换成普通数组的方法
2015/07/10 PHP
通过一段代码简单说js中的this的使用
2013/07/23 Javascript
Javascript Web Slider 焦点图示例源码
2013/10/10 Javascript
浅谈JavaScript 框架分类
2014/11/10 Javascript
jQuery实现Meizu魅族官方网站的导航菜单效果
2015/09/14 Javascript
jQuery与Ajax以及序列化
2016/02/01 Javascript
Google 爬虫如何抓取 JavaScript 的内容
2017/04/07 Javascript
vue仿淘宝订单状态的tab切换效果
2020/06/23 Javascript
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
2017/11/10 jQuery
浅析JS中什么是自定义react数据验证组件
2018/10/19 Javascript
配置一个vue3.0项目的完整步骤
2019/04/26 Javascript
原生js实现自定义消息提示框
2020/11/19 Javascript
[01:20]PWL S2开团时刻第三期——团战可以输 蝙蝠必须死
2020/11/26 DOTA
[47:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第二场 3月4日
2021/03/11 DOTA
Python迭代用法实例教程
2014/09/08 Python
分析Python的Django框架的运行方式及处理流程
2015/04/08 Python
Python下线程之间的共享和释放示例
2015/05/04 Python
详解python字节码
2018/02/07 Python
我用Python抓取了7000 多本电子书案例详解
2019/03/25 Python
pip安装python库的方法总结
2019/08/02 Python
Casadei卡萨蒂官网:意大利奢侈鞋履品牌
2017/10/28 全球购物
英国的潮牌鞋履服饰商店:size?
2019/03/26 全球购物
音乐学个人的自荐书范文
2013/11/26 职场文书
营业员演讲稿
2013/12/30 职场文书
高中生职业规划范文
2014/03/09 职场文书
英语教育专业毕业生求职信
2014/08/28 职场文书
爱护公共设施倡议书
2014/08/29 职场文书
市委常委班子党的群众路线教育实践活动整改措施
2014/10/02 职场文书
婚前协议书范本两则
2014/10/16 职场文书
繁星春水读书笔记
2015/06/30 职场文书
启迪人心的励志语录:脾气永远不要大于本事
2020/01/02 职场文书
使用 CSS 轻松实现一些高频出现的奇形怪状按钮
2021/12/06 HTML / CSS