浅谈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 相关文章推荐
JavaScript中的null和undefined解析
Apr 14 Javascript
用JS实现3D球状标签云示例代码
Dec 01 Javascript
jquery实现表格本地排序的方法
Mar 11 Javascript
js实现仿阿里巴巴城市选择框效果实例
Jun 24 Javascript
javascript实现tab切换的四种方法
Nov 05 Javascript
Javascript实现跑马灯效果的简单实例
May 31 Javascript
Angular.js指令学习中一些重要属性的用法教程
May 24 Javascript
常用的 JS 排序算法 整理版
Apr 05 Javascript
浅谈redux以及react-redux简单实现
Aug 28 Javascript
如何为你的JavaScript代码日志着色详解
Apr 08 Javascript
vue-cli设置publicPath小记
Apr 14 Javascript
深度解读vue-resize的具体用法
Jul 08 Javascript
如何使用vue3打造一个物料库
Ajax常用封装库——Axios的使用
May 08 #Javascript
微信小程序用户授权最佳实践指南
vue完美实现el-table列宽自适应
详解JS WebSocket断开原因和心跳机制
May 07 #Javascript
如何用threejs实现实时多边形折射
详解JS ES6编码规范
May 07 #Javascript
You might like
mysql_num_rows VS COUNT 效率问题分析
2011/04/23 PHP
str_replace只替换一次字符串的方法
2013/04/09 PHP
php解析base64数据生成图片的方法
2016/12/06 PHP
PHP实现向关联数组指定的Key之前插入元素的方法
2017/06/06 PHP
Laravel框架源码解析之反射的使用详解
2020/05/14 PHP
插件:检测javascript的内存泄漏
2007/03/04 Javascript
js判断变量是否空值的代码
2008/10/26 Javascript
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
2011/10/21 Javascript
40款非常棒的jQuery 插件和制作教程(系列二)
2011/11/02 Javascript
JS 实现导航栏悬停效果(续2)
2013/09/24 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
2014/06/24 Javascript
jQuery中innerWidth()方法用法实例
2015/01/19 Javascript
JavaScript基本数据类型及值类型和引用类型
2015/08/25 Javascript
jqGrid中文文档之选项设置
2015/12/02 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
2016/07/14 Javascript
详解js的事件代理(委托)
2016/12/22 Javascript
nodejs利用http模块实现银行卡所属银行查询和骚扰电话验证示例
2016/12/30 NodeJs
Bootstrap下拉菜单Dropdowns的实现代码
2017/03/17 Javascript
详解react-native-fs插件的使用以及遇到的坑
2017/09/12 Javascript
nodejs socket服务端和客户端简单通信功能
2017/09/14 NodeJs
JavaScript数组方法的错误使用例子
2018/09/13 Javascript
优雅的在React项目中使用Redux的方法
2018/11/10 Javascript
详解Vue路由自动注入实践
2019/04/17 Javascript
Vue自定义全局弹窗组件操作
2020/08/11 Javascript
[54:19]完美世界DOTA2联赛PWL S2 Magma vs PXG 第二场 11.28
2020/12/01 DOTA
python批量查询、汉字去重处理CSV文件
2018/05/31 Python
python生成n个元素的全组合方法
2018/11/13 Python
html5中svg canvas和图片之间相互转化思路代码
2014/01/24 HTML / CSS
澳大利亚女性快速时尚零售商:Ally Fashion
2018/04/25 全球购物
abstract class和interface有什么区别
2013/08/04 面试题
药剂学专业应届生自荐信
2013/09/29 职场文书
本科毕业生求职自荐信
2014/02/03 职场文书
霸王洗发水广告词
2014/03/14 职场文书
机关作风整顿个人整改措施思想汇报
2014/09/29 职场文书
领导干部群众路线剖析材料
2014/10/09 职场文书
Vue组件更新数据v-model不生效的解决
2022/04/02 Vue.js