浅谈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 相关文章推荐
如何判断图片地址是否失效
Feb 02 Javascript
返回对象在当前级别中是第几个元素的实现代码
Jan 20 Javascript
JQuery实现鼠标移动到图片上显示边框效果
Jan 09 Javascript
jQuery 计算iframe 窗口大小的方法
May 13 Javascript
jQuery实现高亮显示网页关键词的方法
Aug 07 Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
Nov 17 Javascript
详谈javascript异步编程
Feb 21 Javascript
JS实现获取剪贴板内容的方法
Jun 21 Javascript
通过网页查看JS源码中汉字显示乱码的解决方法
Oct 26 Javascript
微信小程序中显示倒计时代码实例
May 09 Javascript
vue监听用户输入和点击功能
Sep 27 Javascript
如何利用javascript接收json信息并进行处理
Aug 06 Javascript
如何使用vue3打造一个物料库
Ajax常用封装库——Axios的使用
May 08 #Javascript
微信小程序用户授权最佳实践指南
vue完美实现el-table列宽自适应
详解JS WebSocket断开原因和心跳机制
May 07 #Javascript
如何用threejs实现实时多边形折射
详解JS ES6编码规范
May 07 #Javascript
You might like
使用php验证复选框有效性的示例
2013/11/13 PHP
php利用新浪接口查询ip获取地理位置示例
2014/01/20 PHP
PHP文件打开关闭及读写操作示例解析
2020/08/06 PHP
Js动态添加复选框Checkbox的实例方法
2013/04/08 Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
2013/08/23 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
2013/09/05 Javascript
js日期、星座的级联显示代码
2014/01/23 Javascript
node.js中的fs.readFileSync方法使用说明
2014/12/15 Javascript
JavaScript常用脚本汇总(二)
2015/03/04 Javascript
JavaScript中逗号运算符介绍及使用示例
2015/03/13 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
2016/03/01 Javascript
js获取隐藏元素宽高的实现方法
2016/05/19 Javascript
整理关于Bootstrap警示框的慕课笔记
2017/03/29 Javascript
React.Js添加与删除onScroll事件的方法详解
2017/11/03 Javascript
swiper Scrollbar滚动条组件详解
2019/09/08 Javascript
Python实现控制台进度条功能
2016/01/04 Python
django开发之settings.py中变量的全局引用详解
2017/03/29 Python
Python基于scapy实现修改IP发送请求的方法示例
2017/07/08 Python
Django 多语言教程的实现(i18n)
2018/07/07 Python
修改默认的pip版本为对应python2.7的方法
2018/11/06 Python
python3+pyqt5+itchat微信定时发送消息的方法
2019/02/20 Python
TensorFlow车牌识别完整版代码(含车牌数据集)
2019/08/05 Python
django将网络中的图片,保存成model中的ImageField的实例
2019/08/07 Python
安装不同版本的tensorflow与models方法实现
2021/02/20 Python
Manuka Doctor美国官网:麦卢卡蜂蜜和蜂毒护肤
2016/12/25 全球购物
乐高奥地利官方商店:LEGO Shop AT
2019/07/16 全球购物
怀旧香味蜡烛:Homesick
2019/11/02 全球购物
师范生自荐信
2013/10/27 职场文书
外语专业毕业生个人的自荐信
2013/11/19 职场文书
护理专业优质毕业生自荐书
2014/01/31 职场文书
七一党日活动总结
2014/07/08 职场文书
教师批评与自我批评范文
2014/10/15 职场文书
2019年亲子运动会口号
2019/10/11 职场文书
使用nginx配置访问wgcloud的方法
2021/06/26 Servers
Opencv实现二维直方图的计算及绘制
2021/07/21 Python
SQL Server2019数据库备份与还原脚本,数据库可批量备份
2021/11/20 SQL Server