JavaScript Blob对象原理及用法详解


Posted in Javascript onOctober 14, 2020

Blob是JavaScript内建对象,表示不可变的原始数据,类似文件的对象。

blob是表示原始数据的不可变对象,这些数据不一定是JavaScript原生格式的,文件接口基于Blob,继承Blob功能并将其扩展为支持用户系统上的文件。

Blob有很多用途:

可以从网络的内容创建。

可以保存到磁盘或从磁盘读取。

例如,它们是FileReader API中使用的File的基础数据结构。

我们可以使用 Blob() 构造函数从其他非blob对象和数据构造Blob。

Blob构造函数

Blob构造函数允许从其他对象创建Blob。例如,从字符串构造Blob。

let hero = {name: 'Batman'}
let blobObject = new Blob([jsON.stringify(hero, null, 2)], { type: 'application/json' });
console.log(blobObject);

现在,如果我们在浏览器中运行此文件,我们将在浏览器控制台中看到以下输出。

JavaScript Blob对象原理及用法详解

Blob size 属性

Blob.size 属性返回Blob或File的大小(以字节为单位)。

var sizeInBytes = blob.size

参见以下示例。

let hero = {name: 'Batman'}
let blobObject = new Blob([JSON.stringify(hero, null, 2)],{ type: 'application/json' });
console.log(blobObject.size);

将会输出:22

Blob.slice() 方法

Blob.slice() 函数用于创建新的Blob对象,该对象包含源Blob的指定字节范围内的数据。

instanceOfBlob.slice([start [, end [, contentType]]]);

参见以下代码。

let hero = {name: 'Batman'}
let blobObject = new Blob([JSON.stringify(hero, null, 2)], { type: 'application/json' });
console.log(blobObject.slice(10, 16, { type: 'application/json' }));

输出

JavaScript Blob对象原理及用法详解

总结

使用二进制远程文件时,Blob非常有用。

Blob可能非常大,即也可能包含音频和视频数据。可以动态创建它们,并使用Blob URL用作文件。我们可以通过多种不同方式使用它们,以使它们更有用。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 变量类型转换常用函数与代码[比较全]
Dec 01 Javascript
打造基于jQuery的高性能TreeView(asp.net)
Feb 23 Javascript
JavaScript中如何通过arguments对象实现对象的重载
May 12 Javascript
JavaScript中的逻辑判断符&&、||与!介绍
Dec 31 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
May 26 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
Aug 12 Javascript
Angularjs中的ui-bootstrap的使用教程
Feb 19 Javascript
Vue.js项目模板搭建图文教程
Sep 20 Javascript
基于vue开发的在线付费课程应用过程
Jan 25 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
Jul 10 Javascript
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
vue 实现路由跳转时更改页面title
Nov 05 Javascript
基于javascript原生判断DOM是否加载完毕
Oct 14 #Javascript
JavaScript常用进制转换及位运算实例解析
Oct 14 #Javascript
Vue实现鼠标经过文字显示悬浮框效果的示例代码
Oct 14 #Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
Oct 13 #Javascript
原生JS实现相邻月份日历
Oct 13 #Javascript
jquery简易手风琴插件的封装
Oct 13 #jQuery
原生js实现照片墙效果
Oct 13 #Javascript
You might like
解决php使用异步调用获取数据时出现(错误c00ce56e导致此项操作无法完成)
2013/07/03 PHP
php实现压缩多个CSS与JS文件的方法
2014/11/11 PHP
基于CakePHP实现的简单博客系统实例
2015/06/28 PHP
到处都是jQuery选择器的年代 不了解它们的性能,行吗
2012/06/18 Javascript
使用indexOf等在JavaScript的数组中进行元素查找和替换
2013/09/18 Javascript
node.js正则表达式获取网页中所有链接的代码实例
2014/06/03 Javascript
extjs 如何给column 加上提示
2014/07/29 Javascript
JavaScript避免内存泄露及内存管理技巧
2014/09/05 Javascript
Javascript中设置默认参数值示例
2014/09/11 Javascript
jQuery中removeProp()方法用法实例
2015/01/05 Javascript
JavaScript中各种引用类型的常用操作方法小结
2016/05/05 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
2017/03/22 Javascript
微信小程序实现文字跑马灯效果
2020/05/26 Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
2018/05/18 Javascript
Vue使用NPM方式搭建项目
2018/10/25 Javascript
[46:43]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#2LGD VS MVP.Phx第二局
2016/03/02 DOTA
Python获取apk文件URL地址实例
2013/11/01 Python
Python的Bottle框架中获取制定cookie的教程
2015/04/24 Python
用Python实现斐波那契(Fibonacci)函数
2016/03/25 Python
python 排序算法总结及实例详解
2016/09/28 Python
Python global全局变量函数详解
2018/09/18 Python
python mac下安装虚拟环境的图文教程
2019/04/12 Python
python 6.7 编写printTable()函数表格打印(完整代码)
2020/03/25 Python
Python 实现平台类游戏添加跳跃功能
2020/03/27 Python
python request 模块详细介绍
2020/11/10 Python
Expedia印度尼西亚站:预订酒店、廉价航班和度假套餐
2018/01/31 全球购物
C语言编程题
2015/03/09 面试题
小学毕业典礼主持词
2014/03/27 职场文书
大学生通用个人自我评价
2014/04/27 职场文书
生产车间标语
2014/06/11 职场文书
亲子阅读的活动方案
2014/08/15 职场文书
2014统计局民主生活会对照检查材料思想汇报
2014/10/02 职场文书
家属联谊会致辞
2015/07/31 职场文书
导游词之云南丽江-泸沽湖
2019/09/26 职场文书
pytorch 一行代码查看网络参数总量的实现
2021/05/12 Python
Java使用JMeter进行高并发测试
2021/11/23 Java/Android