关于 Blob
博客地址:https://ainyi.com/88
对于 Blob,前端开发中可能比较少遇到;数据库中可使用 Blob 概念,例如 Mysql 存储二进制数据的类型就是 Blob,也就是说图片可存储于数据库中,以二进制格式存储
Blob 对象表示一个不可变、原始数据的类文件对象。File 接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件
Blob 是二进制数据对象,是类文件对象的二进制数据
我在之前有篇博客说到 Blob:利用 Blob 处理 Node 层返回的二进制文件流字符串并下载文件
这里我利用 Blob 实现文件拆分再合并下载的方法,算是第一次使用
我们最常见的应该是 Blob URL 技术,文件上传的预览、视频播放的 src,均是采用这种技术实现
Blob URL 就是以 blob: 开头的一段地址,指向的是一个二进制数据
使用 URL.createObjectURL(blob) 方法生成,参数为 Blob 对象
这个 Blob URL 是可以直接访问的;需要注意的是这个 URL 的生效时间,等同于网页的存在时间,一旦网页刷新或关闭,这个 Blob URL 就失效
构造函数
Blob(blobParts[, options])
返回一个新创建的 Blob 对象,其内容由参数中给定的数组串联组成
参数说明:
blobParts:数组类型,数组中的每一项连接起来构成 Blob 对象的数据,数组中的每项元素可以是ArrayBuffer, ArrayBufferView, Blob, DOMString
options:可选参数;字典格式类型,可以指定如下两个属性:
- type:放入到 blob 中的数组内容的 MIME 类型 MIME 参考手册
- endings:用于指定包含行结束符\n的字符串如何被写入;可设置值:native、transparent;native:表示行结束符会被更改为适合宿主操作系统文件系统的换行符; transparent:表示会保持blob中保存的结束符不变;默认值为 transparent;
使用场景
介绍三种使用场景
- 二进制流文件下载
- 图片预览
- 视频加载
二进制流文件下载
// 获取文件二进制流 content
const content = await downloadContract(params)
// 再利用 Buffer 转为对象
const buf = Buffer.from(content, 'binary')
// 生成 Blob 对象,type 类型设置为 pdf 的 MIME 类型
const blob = new Blob([buf], {type: 'application/pdf'});
// 获取 Blob URL,可赋值到 a 标签 href 属性进行下载
const url = URL.createObjectURL(blob)
通过 Blob 生成文件、利用 Blob URL 获取下载链接,这样就实现后端返回二进制格式的文件进行合并再下载
图片预览
较为简单,获取文件对象后,再通过 createObjectURL 方法得到 Blob URL
最后直接赋值到 img 标签的 src 属性即可
<input id="upload" type="file" />
<img id="preview" src="" alt="预览"/>
const upload = document.querySelector('#upload')
const preview = document.querySelector('#preview')
upload.onchange = function() {
const file = upload.files[0] // File 对象
const src = URL.createObjectURL(file)
preview.src = src
}
视频加载
视频地址,不同于上面的 input,可以直接拿到 File 对象
只有一个视频地址怎么能将这个 URL 变成我们想要的 Blob URL 形式呢
从 URL.createObjectURL(blob) 方法来看,首先要拿到存储这个视频原始数据的 Blob 对象
平时我们请求接口可以使用 axios / ajax / xhr 或 fetch,请求一个服务端地址可以返回我们相应的数据,那如果我们去请求一个图片或视频地址会返回什么?应当是返回图片和视频的数据,这种情况只要设置正确responseType才能拿到我们想要的格式数据
// responseType 参数如下:
// text 字符串;blob Blob对象;arraybuffer ArrayBuffer 对象
function ajax(url, cb) {
const xhr = new XMLHttpRequest()
xhr.open('get', url)
xhr.responseType = 'blob'
xhr.onload = function() {
cb(xhr.response)
}
xhr.send()
}
上面请求返回一个 Blob 对象,接下来只要然后通过 createObjectURL 生成 Blob URL 赋值给视频的 src 属性就可以了
ajax('video.mp4', function(res){
const src = URL.createObjectURL(res)
video.src = src
})
大文件分片上传
最近看到一篇文章:大规格文件的上传优化
里面讲的是利用 Blob 实现文件分片上传,对于大文件上传有很好的效果
其核心思想是文件分片,使用 File.slice() 方法进行文件分片;File 对象是继承 Blob 对象的,因此 File 对象也有 slice 方法
Blob.slice([start[, end[, contentType]]])
start 可选
这个参数代表 Blob 里的下标,表示第一个会被会被拷贝进新的 Blob 的字节的起始位置。如果你传入的是一个负数,那么这个偏移量将会从数据的末尾从后到前开始计算
举例来说: -10 将会是 Blob 的倒数第十个字节。它的默认值是0, 如果你传入的start的长度大于源 Blob 的长度,那么返回的将会是一个长度为0并且不包含任何数据的一个 Blob 对象
end 可选
这个参数代表的是 Blob 的一个下标,这个下标-1的对应的字节将会是被拷贝进新的Blob 的最后一个字节。如果你传入了一个负数,那么这个偏移量将会从数据的末尾从后到前开始计算
举例来说: -10 将会是 Blob 的倒数第十个字节。它的默认值就是它的原始长度(size)
contentType 可选
给新的 Blob 赋予一个新的文档类型。这将会把它的 type 属性设为被传入的值。它的默认值是一个空的字符串
文件分片方法
定义每一个分片文件的大小变量为 chunkSize,通过文件大小 FileSize 和分片大小 chunkSize 得到分片数量 chunks,使用 for 循环和 file.slice() 方法对文件进行分片,序号为 0 - n,和已上传的切片列表做比对,得到所有未上传的分片,push 到请求列表 requestList
上传进度
监听原生 Javascript 的 XMLHttpRequest 的 progress 事件,这个事件会返回文件已上传的大小和总大小,可实现上传进度的变化
博客地址:https://ainyi.com/88
关于 Blob的更多相关文章
- Oracle Blob数据保存为文件
好久不写文,最近得空写一点.Oracle数据库国内用户量主要在企业上,其中有一种byte的存储称为Blob,并不能直接看. 有时候为了调试需要,可以通过: ,)) ; 这种sql去转为字符串查看,但是 ...
- [HTML5] Blob对象
写在前面 本篇主要总结Blob对象属性及作用,通过DEMO介绍Blob对象的应用场景. Blob对象 一直以来,JS都没有比较好的可以直接处理二进制的方法.而Blob的存在,允许我们可以通过JS直接操 ...
- 【转】Caffe初试(八)Blob,Layer和Net以及对应配置文件的编写
深度网络(net)是一个组合模型,它由许多相互连接的层(layers)组合而成.Caffe就是组建深度网络的这样一种工具,它按照一定的策略,一层一层的搭建出自己的模型.它将所有的信息数据定义为blob ...
- https://github.com/chenghuige/tensorflow-exp/blob/master/examples/sparse-tensor-classification/
https://github.com/chenghuige/tensorflow-exp/blob/master/examples/sparse-tensor-classification/ ...
- <十>JDBC_处理Blob类型数据
/* * 读取BLOB数据: * 使用getBlob方法读取到Blob对象 * 调用Blob的getBinaryStream(方法得到输入流,在使用IO操作 * */ @Test publ ...
- oracle--导出、导入blob类型的字段
blob是oracle中的一个数据类型,保存的是压缩后的二进制形式的大数据. 数据迁移如果涉及到blob字段,都不好处理,因为无法用常规方法进行操作,如:使用select查看该字段,也无法用inser ...
- Azure Blob Storage 基本用法 -- Azure Storage 之 Blob
Azure Storage 是微软 Azure 云提供的云端存储解决方案,当前支持的存储类型有 Blob.Queue.File 和 Table. 笔者在<Azure Table storage ...
- [New Portal]Windows Azure Storage (14) 使用Azure Blob的PutBlock方法,实现文件的分块、离线上传
<Windows Azure Platform 系列文章目录> 相关内容 Windows Azure Platform (二十二) Windows Azure Storage Servic ...
- Windows Azure Storage (19) 再谈Azure Block Blob和Page Blob
<Windows Azure Platform 系列文章目录> 请读者在参考本文之前,预习相关背景知识:Windows Azure Storage (1) Windows Azure St ...
- C# Azure 存储-Blob
1. 前言 本文是根据Azure文档与本人做了验证之后写的. 如果想下载微软官网的demo, 请前往github https://github.com/Azure-Samples/storage-bl ...
随机推荐
- TeamViewer11 万全免费
下载地址:百度网盘 c4xm TeamViewer 是一款简单易用且功能强大的远程控制软件,它能穿越内网,摆脱路由器或防火墙的限制,任何一方都不需要拥有固定IP地址.让不懂技术的朋友也能远程控制电脑, ...
- python爬虫——用selenium爬取京东商品信息
1.先附上效果图(我偷懒只爬了4页) 2.京东的网址https://www.jd.com/ 3.我这里是不加载图片,加快爬取速度,也可以用Headless无弹窗模式 options = webdri ...
- 算法笔记刷题3(codeup 5901)
今天刷题的速度依旧很慢(小乌龟挥爪.jpg) 我觉得codeup5901中回文串的处理很妙,如果是我自己写的话可能会把数组直接倒过来和原来对比.按照对称规律进行比对的话,工作量可以减少一半. #inc ...
- python学习笔记(四)---用户输入与while循环
用户输入 函数input demo1: message = input("all you input is chars:") print(message) demo2: 由inpu ...
- [Batch 脚本] 批量生成文件夹
@echo off echo start set time=30000 echo %time% for /l %%i in (1,1, %time%) do ( echo %%i% md " ...
- java中Future的使用
文章目录 创建Future 从Future获取结果 取消Future 多线程环境中运行 java中Future的使用 Future是java 1.5引入的一个interface,可以方便的用于异步结果 ...
- Scala教程之:静态类型
文章目录 泛类型 型变 协变 逆变 不变 类型上界 类型下界 内部类 抽象类型 复合类型 自类型 隐式参数 隐式转换 多态方法 类型推断 Scala是静态类型的,它拥有一个强大的类型系统,静态地强制以 ...
- Linux网络服务第六章PXE高效能批量网络装机
1.IP地址配置 2.关闭防火墙以及selinux状态如下 systemctl stop firewalld Iptables -F Setenforce 0 三.部署FTP服务 1.安装F ...
- web 之 tomcat 8.5 和9.0如何进入manager?
tomcat 8.5 和9.0如何进入manager? 第一步找到tomcat-user.xml文件 第二步添加如下代码 <role rolename="manager-gui&quo ...
- CSS开发技巧(一):button样式设置
button样式需要注意的有几点: 1.建议有一个最小宽度,以免在文字很少时使得按钮过于窄,宽高不协调: 2.建议有一个padding,以免内部文本显得过于拥挤: 2.hover时需要有颜色变化,以告 ...