jsarraybufferdaya释放_聊聊JS的二进制家族:Blob、ArrayBuffer和Buffer
事实上,前端很少涉及对二进制数据的处理,但即便如此,我们偶尔总能在角落里看见它们的身影。
今天我们就来聊一聊前端的二进制家族:Blob、ArrayBuffer和Buffer
概述
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属性,然后在页面上点击这个链接就可以实现下载了
点此进行下载
varblob= newBlob(["Hello World"]);varurl=window.URL.createObjectURL(blob);vara=document.getElementById("h");
a.download= "helloworld.txt";
a.href=url;
备注:download属性不兼容IE, 对IE可通过window.navigator.msSaveBlob方法或其他进行优化(IE10/11)
运行结果
Blob图片本地显示
window.URL.createObjectURL生成的Blob URL还可以赋给img.src,从而实现图片的显示
const img=document.getElementById('img');
const url=window.URL.createObjectURL(file);
img.src=url;
img.οnlοad= function() {//释放一个之前通过调用 URL.createObjectURL创建的 URL 对象
window.URL.revokeObjectURL(url);
}
},false);
运行结果
Blob文件分片上传
通过Blob.slice(start,end)可以分割大Blob为多个小Blob
xhr.send是可以直接发送Blob对象的
前端
functionupload(blob) {varxhr= newXMLHttpRequest();
xhr.open('POST','/ajax',true);
xhr.setRequestHeader('Content-Type','text/plain')
xhr.send(blob);
}
document.getElementById('f').addEventListener('change',function(e) {varblob= this.files[0];
const CHUNK_SIZE= 20; .
const SIZE=blob.size;varstart= 0;varend=CHUNK_SIZE;while(start
upload(blob.slice(start, end));
start=end;
end=start+CHUNK_SIZE;
}
},false);
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
下面我们尝试把一个文件的内容通过字符串的方式读取出来
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= newFileReader();
fileReader.οnlοad= function() {
const result=fileReader.result;
console.log(result)
}
fileReader.readAsArrayBuffer(file);
},false);
运行结果
通过ArrayBuffer的格式读取Ajax请求数据
通过xhr.responseType = "arraybuffer" 指定响应的数据类型
在onload回调里打印xhr.response
前端
const xhr = newXMLHttpRequest();
xhr.open("GET", "ajax", true);
xhr.responseType= "arraybuffer";
xhr.οnlοad= function() {
console.log(xhr.response)
}
xhr.send();
Node端
const app = newKoa();
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= newInt8Array(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= newDataView(buffer);
view.setInt8(2, 42);
console.log(view.getInt8(2));//输出: 42
Buffer
Buffer是Node.js提供的对象,前端没有。 它一般应用于IO操作,例如接收前端请求数据时候,可以通过以下的Buffer的API对接收到的前端数据进行整合
Buffer实战
例子如下:
Node端(Koa)
const app = newKoa();
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 = newXMLHttpRequest();
xhr.open("POST", "ajax", true);
xhr.setRequestHeader('Content-Type', 'text/plain')
xhr.send("asdasdsadfsdfsadasdas");
运行结果
Node端输出
asdasdsadfsdfsadasdas
jsarraybufferdaya释放_聊聊JS的二进制家族:Blob、ArrayBuffer和Buffer相关推荐
- js define函数_聊聊JS模块化发展历程
1 引言 如今,Javascript 模块化规范非常方便.自然,但这个新规范仅执行了2年,就在 4 年前,js 的模块化还停留在运行时支持,10 年前,通过后端模版定义.注释定义模块依赖.对经历过来的 ...
- Js处理二进制new Blob()文件后缀名格式类型对照表
靠前几种是自己开发中常用到的类型,建议使用ctrl+F搜索查找 后缀名 文件类型 类型(type) 常用类型 .pdf PDF application/pdf .xls Microsoft Excel ...
- base64 转二进制_一篇文章弄明白Node.js与二进制数据流
1 认识二进制数据 二进制是计算技术中广泛采用的一种数制.二进制数据是用0和1两个数码来表示的数.它的基数为2,进位规则是"逢二进一",借位规则是"借一当二", ...
- 二进制差分码规则_一篇文章弄明白Node.js与二进制数据流
1 认识二进制数据 二进制是计算技术中广泛采用的一种数制.二进制数据是用0和1两个数码来表示的数.它的基数为2,进位规则是"逢二进一",借位规则是"借一当二", ...
- Java接受blob类型图片_原生JS上传图片接收服务器端图片并且显示图片(主要描述blob类型)...
1.了解后端处理图像的方式 一:图片以独立文件的形式存储在服务器的指定文件夹中,再将路径存入数据库字段中 二:将图片转换成blob,直接存储到数据库的 Image 类型字段中(这种方式负担很大不建议使 ...
- [JavaScript]为JS处理二进制数据提供可能性的WEB API
写这篇博客的起源是在div.io上的一篇文章<你所不知道的JavaScript数组>by 小胡子哥下的评论中的讨论. 因为随着XHR2和现代浏览器的普及,在浏览器当中处理二进制不再向过去那 ...
- 【原】聊聊js代码异常监控
[原]聊聊js代码异常监控 参考文章: (1)[原]聊聊js代码异常监控 (2)https://www.cnblogs.com/xianyulaodi/p/6201829.html (3)https: ...
- WebSocket之JS发送二进制
WebSocket之JS发送二进制 老鼠AI大米_Java全栈 原文:WebSocket之JS发送二进制 - 简书 (jianshu.com) 大家都知道使用socket通信都是二进制,通信框架多是使 ...
- 【面试题】聊聊 js 异步解决方案
大厂面试题分享 面试题库 前端面试题库 (面试必备) 推荐:★★★★★ 地址:前端面试题库 前言 继续聊聊 js 的异步解决方案有哪些,以及各个方案的优缺点是什么...... 回调函数(callb ...
- javascript(js)语法 将blob转arrayBuffer、arrayBuffer转Uint8Array、Uint8Array转String的方法
文章目录 javascript(js)语法 将blob转arrayBuffer.arrayBuffer转Uint8Array.Uint8Array转String的方法 1. blob转arrayBuf ...
最新文章
- LeetCode简单题之环和杆
- 端口聚合与Trunk综合配置
- zookeepr+kafka集群搭建(一)
- python之lambda
- 异步处理函数async_Spring @Async异步处理注释
- python网络通信中cs架构_python3基于TCP实现CS架构文件传输
- 从0开始html前端页面开发_CSS设置图像圆角
- 利用python处理pdf文本,帮我省下不少钱
- lqr matlab,MATLAB中的LQR函数用法
- 私藏了好几年的20个谷歌搜索技巧
- html设置为邮箱格式,HTML中怎么设置为email链接
- puber們這一季的愛情啊
- 复试编程训练真题——C语言,统计各单词(字符)出现的次数,并将各单词(字符)和其出现的次数输出到屏幕和文件中
- 拼多多app是原生还是html,拼多多app下架了是怎么回事?原因及上线时间分析
- Laravel表单验证,优雅一点的写法,控制器里面不要写太多东西,
- 中国各省市元宇宙政策汇编
- 系统部署服务器位置,室内定位系统在实际项目中的部署
- PostgreSQL+postgis入门及简单应用(dijkstra实现最短路径)
- 缺少模板文件index.html,Index.html模板未为HtmlWebpackPlugin加载网站图标
- springboot+vue漫画之家系统(源码+文档)
热门文章
- luogu P1908 逆序对
- 关于Spring3 MVC的 HttpMediaTypeNotSupportedException
- 20、淘宝技术这十年
- Atitit.数据库分区的设计 attilax 总结
- codeforces 463A Caisa and Sugar 解题报告
- Windows 7下硬盘安装Ubuntu 14.10图文教程【硬盘安装】
- 从零基础入门Tensorflow2.0 ----四、15.tf.data读取csv文件并与tf.keras结合使用
- pypi 镜像使用帮助——临时使用镜像网站
- 【ArcGIS|空间分析】图像纠正
- r语言TeachingDemos包绘制黑白脸谱图