当前位置: 首页 > news >正文

blob 图片_JavaScript之Blob对象类型的具体使用方法

4a6ec59ab8a8cec28898012986097e67.png

Blob(BinaryLargeObject)术语最初来自数据库(oracle中也有类似的栏位类型。),早期数据库因为要存储声音、图片、以及可执行程序等二进制数据对象所以给该类对象取名为Blob。

在Web领域,Blob被定义为包含只读数据的类文件对象。Blob中的数据不一定是js原生数据形式。常见的File接口就继承自Blob,并扩展它用于支持用户系统的本地文件。

178592f0675bd4380000ff0b002acfd4.png

构建一个Blob对象通常有三种方式:

用法:新方法创建Blob对象(构造函数来构建)

e83a685b2649ed6f7d6195bb7bf00dc1.png

构造函数,接受两个参数

第一个参数:为一个数据序列,可以是任意格式的值,例如,任意数量的字符串,Blobs以及ArrayBuffers。

第二个参数:用于指定将要放入Blob中的数据的类型(MIME)(后端可以通过枚举MimeType,获取对应类型:

81df61eb6c63dd56dabc1c5b31740536.png
122c994aaad3cd30ef8195323ce22cf9.png

Blob对象的基本属性:

原生对象构建Blob

b8b35e56affe86977c135db134abd5af.png

提示出错:

原因在于Blob构造函数要求第一个参数必须是数组,而这里第一个参数既不是一个数组,也没有可索引的属性。既然这里提到了对象的可索引属性,让我联想到了类数组的概念,而Arguments就是一个很好的例子。来试一试:

c6ec73e5abddedddead43b32798e3477.png

可以看到即使是类数组对象,而数组元素类型是Number也能得出正确的结论,猜想大概是由于构造函数内部把Number转化为String的缘故吧!

再来试一试其他的参数类型:

97c09d07841b848cef4010b674c6cd80.png

blob.type等于application/json没问题。arg转为字符串后的长度为16加上制表符的宽度4个字节等于20。

Blob对象的基本方法:

大文件分割(slice()方法),slice方法与数组的slice类似。

f9c1b2b6e6755153ff3517054cabc081.png

slice()方法接受三个参数,起始偏移量,结束偏移量,还有可选的mime类型。如果mime类型,没有设置,那么新的Blob对象的mime类型和父级一样。

当要上传大文件的时候,此方法非常有用,可以将大文件分割分段,然后各自上传,因为分割之后的Blob对象和原始的是独立存在的。

不过目前浏览器实现此方法还没有统一,火狐使用的是mozSlice(),Chrome使用的是webkitSlice(),其他浏览器则正常的方式slice()

可以写一个兼容各浏览器的方法:

425893798995a2105e862bb6825e0050.png

利用Blob显示缩略图`

b15f4f1e89802deef00210ba0f7e44c0.png

由于File对象继承自Blob,所以我们可以很方便的利用File对象加载本地系统图片文件,并通过createObjectURL生成一个URL并加以显示。

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

相关文章:

  • tmemo 选择消除行_选择适合女生长期喝的茶? 这4款茶女性四季皆宜
  • .dat文件写入byte类型数组_用Python从Abaqus导出txt、dat数据
  • microbit和python哪个适合_掌控板和microbit哪个好?
  • vue子组件获取父组件数据_微信小程序自定义组件问题二:父(页面)子组件之间的通信...
  • python获取用户输入_python中使用input()函数获取用户输入值方式
  • python数据分析自学教程_【好程序员】Python数据分析全套视频教程
  • ea 通信图_深入浅出聊聊相干光通信(上)看看中长距如何实现400G传输
  • sublime text3 python找不到文件路径_Sublime text 3 集成python 3 环境配置
  • jsp可以使用iframe_使用 JavaScript Object URL,可以处理图像、音频和视频
  • python xlrd_Python xlrd库常用操作汇总
  • python如何调用文件_python中调用不同文件夹的py文件
  • python windows窗口开发_微软上线《在Windows上使用Python进行开发》教程
  • quartz 动态添加job_spring boot Quartz基于持久化存储的动态管理
  • 学python还是php_米凯seo: 到底是学Python、PHP还是Ruby?
  • python命名空间更改_python命名空间
  • 【刷算法】从上往下打印二叉树
  • 〔开发系列〕一次关于小程序开发的深度总结
  • Debian下无root权限使用Python访问Oracle
  • ESLint简单操作
  • exports和module.exports
  • Java 11 发布计划来了,已确定 3个 新特性!!
  • Java 内存分配及垃圾回收机制初探
  • JavaScript创建对象的四种方式
  • Meteor的表单提交:Form
  • php ci框架整合银盛支付
  • puppeteer stop redirect 的正确姿势及 net::ERR_FAILED 的解决
  • React-生命周期杂记
  • SQL 难点解决:记录的引用
  • 程序员最讨厌的9句话,你可有补充?
  • 探索 JS 中的模块化
  • Java数据解析之JSON
  • 如何正确理解,内页权重高于首页?
  • 小白应该如何快速入门阿里云服务器,新手使用ECS的方法 ...
  • 曜石科技宣布获得千万级天使轮投资,全方面布局电竞产业链 ...
  • ​​​​​​​​​​​​​​Γ函数
  • ​Kaggle X光肺炎检测比赛第二名方案解析 | CVPR 2020 Workshop
  • ​LeetCode解法汇总307. 区域和检索 - 数组可修改
  • ​什么是bug?bug的源头在哪里?
  • #NOIP 2014# day.1 生活大爆炸版 石头剪刀布
  • (2/2) 为了理解 UWP 的启动流程,我从零开始创建了一个 UWP 程序
  • (2009.11版)《网络管理员考试 考前冲刺预测卷及考点解析》复习重点
  • (webRTC、RecordRTC):navigator.mediaDevices undefined
  • (差分)胡桃爱原石
  • (七)理解angular中的module和injector,即依赖注入
  • (深度全面解析)ChatGPT的重大更新给创业者带来了哪些红利机会
  • (译) 理解 Elixir 中的宏 Macro, 第四部分:深入化
  • ../depcomp: line 571: exec: g++: not found
  • .htaccess配置常用技巧
  • .NET 设计一套高性能的弱事件机制
  • .net/c# memcached 获取所有缓存键(keys)
  • .Net调用Java编写的WebServices返回值为Null的解决方法(SoapUI工具测试有返回值)
  • .net之微信企业号开发(一) 所使用的环境与工具以及准备工作
  • @autowired注解作用_Spring Boot进阶教程——注解大全(建议收藏!)
  • [ 隧道技术 ] cpolar 工具详解之将内网端口映射到公网
  • [Angular] 笔记 18:Angular Router