JS中的File(一):Blob对象详解

一、定义

Blob是一个装着二进制数据的容器对象。Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取,也可以转换成 ReadableStream 来用于数据操作。

二、属性

  • size:只读属性,Blob中的字节数
  • type:只读属性,表示Blob存放的媒体类型,图片、视频、文本文件等等

三、构造函数

例子:

const array = ['<q id="a"><span id="b">hey!</span></q>']; // 一个包含单个字符串的数组
const blob = new Blob(array, { type: "text/html" }); // 得到 blob

构造函数主要有两个参数:

  • 参数一:存放文件原始数据的可迭代对象,一般放数组。数组中可以存放各种类型的文件数据格式,例如Buffer、Blob、String等等,如下:【一般都需要在资源内容外面套个中括号[]
// Create a new Blob objectvar a = new Blob();// Create a 1024-byte ArrayBuffer
// buffer could also come from reading a Filevar buffer = new ArrayBuffer(1024);// Create ArrayBufferView objects based on buffervar shorts = new Uint16Array(buffer, 512, 128);
var bytes = new Uint8Array(buffer, shorts.byteOffset + shorts.byteLength);var b = new Blob(["foobarbazetcetc" + "birdiebirdieboo"], {type: "text/plain;charset=utf-8"});var c = new Blob([b, shorts]);var a = new Blob([b, c, bytes]);
  • 参数二:Optionals,可选的配置项,其中主要可配置的属性有两个:
    • type:同第二大点中属性中的type,规定Blob对象文件读取格式
    • endings:可选值为transparent  和 native ,默认为前者,其含义是如果数据是文本,如何解析文本中的换行符。默认值 transparent 会将换行符复制到 blob 中而不会改变它们。要将换行符转换为主机系统的本地约定,请指定值 native

四、常用方法和参数

1、 arrayBuffer()

返回一个 promise,会兑现为一个包含 blob 数据(以二进制形式)的 ArrayBuffer。

2、slice()

使用示例:

slice(start, end, contentType)

其中参数start、end代表字节的索引,可以为正数也可以为负数,如果是负数代表这个偏移量将从末尾往前进行计算,例如-10代表Blob的倒数第10个字节。

另外,start、end代表是左闭右开区间,即end索引指向的字节并不会读取进去

contentType的输入会修改slice生成后新Blob对象中的内容属性type

3、stream()

Blob接口的 stream() 方法返回一个 ReadableStream 对象,读取它将返回包含在 Blob 中的数据

4、text()

Blob接口的 text() 方法返回一个 Promise,其会兑现一个包含 blob 内容的 UTF-8 格式的字符串。

五、Blob的读取

1、使用FileReader对象读取Blob对象中的文件或数据

  • 构造
let file_reader=new FileReader()
  • 指定对Blob的读取方式
file_reader.readAsArrayBuffer(blob)//fileReader中的result保存为读取文件的ArrayBuffer数据对象
file_reader.readAsBinaryString(blob) //result保存为原始二进制数据
file_reader.readAsDataURL(blob) //result保存为格式 data : ${URL格式的Base64字符串}
file_reader.readAsText(blob) //result保存为包含一个字符串以表示所读取的文件内容
  • 定义callBack处理读取到的文件内容
file_reader.onload = function (){let resultData = file_reader.result//....
}

其中onload代表在读取操作成功完成时触发;onloadstart代表在读取操作开始的时候触发;onloadend代表读取操作结束时触发(失败或成功

另外callback有onerror、onabort、onprogress 

  • 终止读取操作
FileReader.abort()  //返回的readyState属性为DONE

2、使用URL对象读取Blob为指定url格式

相当于加一个url入口,来获取本域下Blob对象的资源内容

以利用Blob对象进行图片下载的场景为例

const downloadUrl = URL.createObjectURL(blob)const link = document.createElement('a')
link.href = downloadUrl
link.download = 'image.png'
link.style.display = 'none';
document.body.appendChild(link)
link.click()
document.body.removeChild(link);// 释放 URL 对象
URL.revokeObjectURL(link.href)

上述代码,借助隐藏节点 a元素标签的download属性,人为触发点击事件,完成下载

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/619941.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

前端工程化相关

工具方法&#xff1a; 知道软件包名&#xff0c;拿到源码或者路径的方法 在浏览器输入以下内容&#xff0c;就可以找到你想要的。。。 unpkg.com/输入包名 一、模块化 ESM特性清单&#xff1a; 自动采取严格模式&#xff0c;忽略“use strict”每个ESM模块都是单独的私有作用…

nSum的java解法

两数之和 1. 两数之和 - 力扣&#xff08;LeetCode&#xff09; 可以使用哈希表的方法来解决 如果哈希表中不存在 target - a 这个元素&#xff0c;将这个元素值座位 key&#xff0c;下标作为 value 加入到哈希表中如果存在&#xff0c;返回两个元素的下标即可如果遍历到数组…

网络——华为与华三

作者简介&#xff1a;一名云计算网络运维人员、每天分享网络与运维的技术与干货。 公众号&#xff1a;网络豆云计算学堂 座右铭&#xff1a;低头赶路&#xff0c;敬事如仪 个人主页&#xff1a; 网络豆的主页​​​​​ 写在前面 大家好&#xff0c;我是网络豆&#xff0…

Elasticsearch:是时候离开了! - 在 Elasticsearch 文档上使用 TTL

作者&#xff1a;来自 Elastic David Pilato 想象一下&#xff0c;圣诞老人必须向世界上所有的孩子们分发礼物。 他有很多工作要做&#xff0c;他需要保持高效。 他有一份所有孩子的名单&#xff0c;并且知道他们住在哪里。 他很可能会将礼物按区域分组&#xff0c;然后再交付。…

docker部署ng实现反向代理

场景 按规定尽可能减少开放到外网的端口&#xff0c;所以需要将多个服务部署到一个ip一个端口上。 方案 使用ng实现请求转发。根据http请求中的host与ng配置文件中的server_name匹配&#xff0c;转发到对应的机器上。 在docker上部署三个容器&#xff0c;每个容器中启动一个…

Java内存模型之可见性

文章目录 1.什么是可见性问题2.为什么会有可见性问题3.JMM的抽象&#xff1a;主内存和本地内存3.1 什么是主内存和本地内存3.2 主内存和本地内存的关系 4.Happens-Before原则4.1 什么是Happens-Before4.2 什么不是Happens-Before4.3 Happens-Before规则有哪些4.4 演示&#xff…

【SQL注入】SQLMAP v1.7.11.1 汉化版

下载链接 【SQL注入】SQLMAP v1.7.11.1 汉化版 简介 SQLMAP是一款开源的自动化SQL注入工具&#xff0c;用于扫描和利用Web应用程序中的SQL注入漏洞。它在安全测试领域被广泛应用&#xff0c;可用于检测和利用SQL注入漏洞&#xff0c;以验证应用程序的安全性。 SQL注入是一种…

调试(c语言)

前言&#xff1a; 我们在写程序的时候可能多多少少都会出现一些bug&#xff0c;使我们的程序不能正常运行&#xff0c;所以为了更快更好的找到并修复bug&#xff0c;使这些问题迎刃而解&#xff0c;学习好如何调试代码是每个学习编程的人所必备的技能。 1. 什么是bug&#xf…

UOS cryptsetup详细使用方法

1. 格式化为LUKS加密卷 格式化磁盘或分区为LUKS格式。这一步将清除所有现有数据&#xff0c;并设置一个新的加密密钥&#xff08;密码&#xff09;。 sudo cryptsetup luksFormat /dev/sdX其中 /dev/sdX 是要加密的磁盘或分区的路径。 2. 打开&#xff08;解锁&#xff09;加…

Java项目:06 Springboot的进销存管理系统

作者主页&#xff1a;舒克日记 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文中获取源码 进销存管理系统 介绍 进销存系统是为了对企业生产经营中进货、出货、批发销售、付款等全程进行&#xff08;从接获订单合同开 始&#xff0c;进入物料采购、入…

浅析Linux进程地址空间

前言 现代处理器基本都支持虚拟内存管理&#xff0c;在开启虚存管理时&#xff0c;程序只能访问到虚拟地址&#xff0c;处理器的内存管理单元&#xff08;MMU&#xff09;会自动完成虚拟地址到物理地址的转换。基于虚拟内存机制&#xff0c;操作系统可以为每个运行中的进程创建…

ros2+gazebo(ign)激光雷达+摄像头模拟

虽然ign不能模拟雷达&#xff0c;但是摄线头是可以模拟的。 好了现在都不用模拟了&#xff0c;ign摄线头也模拟不了。 ros2ign gazebo无法全部模拟摄线头和雷达。 只能有这样2个解决方法&#xff1a; 方法1&#xff1a;使用ros2 gazebo11 方案2&#xff1a;使用ros2买一个实…

一系列实用工具、编程工具和学习网站推荐

其他工具&#xff1a; 十分钟临时邮箱&#xff1a;https://www.linshi-email.com/Chrome极简插件&#xff1a;https://chrome.zzzmh.cn/#/indexPc桌面静态壁纸&#xff1a;https://ss.netnr.com/wallpaperProcessOn在线画图&#xff1a;https://www.processon.com/ 编程工具&a…

【问题探讨】基于非支配排序的蜣螂优化算法NSDBO求解微电网多目标优化调度研究

目录 主要内容 模型研究 结果一览 下载链接 主要内容 该模型以环境保护成本和运行成本为双目标构建了微电网优化调度模型&#xff0c;模型目标函数和约束条件复现文献《基于改进粒子群算法的微电网多目标优化调度》&#xff0c;程序的特点是采用非支配排序的蜣螂…

Redis缓存使用问题

数据一致性 只要使用到缓存,无论是本地内存做缓存还是使用 redis 做缓存,那么就会存在数据同步的问题。 以 Tomcat 向 MySQL 中写入和删改数据为例,来解释数据的增删改操作具体是如何进行的。 我们分析一下几种解决方案, 1、先更新缓存,再更新数据库 2、先更新数据库,…

2023年第十四届中国数据库技术大会(DTCC2023):核心内容与学习收获(附大会核心PPT下载)

随着信息化时代的深入发展&#xff0c;数据库技术作为支撑信息化应用的核心技术&#xff0c;其重要性日益凸显。本次大会以“数据价值&#xff0c;驱动未来”为主题&#xff0c;聚焦数据库领域的前沿技术与最新动态&#xff0c;吸引了数千名业界专家、企业代表和数据库技术爱好…

橘子学Spring01之spring的那些工厂和门面使用

一、Spring的工厂体系 我们先来说一下spring的工厂体系(也称之为容器)&#xff0c;得益于大佬们对于单一职责模式的坚决贯彻&#xff0c;在十几年以来spring的发展路上&#xff0c;扩展出来大量的工厂类&#xff0c;每一个工厂类都承担着自己的功能(其实就是有对应的方法实现)…

阿里云云服务器u1实例和e实例有什么区别?

阿里云服务器u1和e实例有什么区别&#xff1f;ECS通用算力型u1实例是企业级独享型云服务器&#xff0c;ECS经济型e实例是共享型云服务器&#xff0c;所以相比较e实例&#xff0c;云服务器u1性能更好一些。e实例为共享型云服务器&#xff0c;共享型实例采用非绑定CPU调度模式&am…

监督学习 - 岭回归(Ridge Regression)

什么是机器学习 岭回归&#xff08;Ridge Regression&#xff09;是一种线性回归的扩展&#xff0c;它通过在损失函数中添加正则化项&#xff08;L2范数&#xff09;来解决线性回归中可能存在的过拟合问题。正则化项有助于限制模型的参数&#xff0c;使其不过分依赖于训练数据…

面试题目1

文章目录 1、安装系统的方法2、总线型3、OSL参考模型&#xff08;网络七层模型&#xff09;4、计算机系统的组成5、计算机硬件 1、安装系统的方法 U盘安装 硬盘安装 刻光盘安装 PE系统中安装 网络安装 2、总线型 所有设备都连接到公共总线上&#xff0c;结点间使用广播通信方…