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

98648a42fb41636573de688853de88a6.png

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

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

43802acde35bb5b02fcf474817feec82.png

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

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

9ec104cd896306e955c871a8d471dbd5.png

构造函数,接受两个参数

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

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

2f210eb047bd28d2f5ed546c07426f43.png
110231f87cf01dcb0a3596fe3f12f123.png

Blob对象的基本属性:

原生对象构建Blob

af01161d0912f4314d22d010e2151c88.png

提示出错:

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

fe75de12d42f152b8c3c108e00423852.png

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

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

04b075a1989b6511f768ba8968251612.png

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

Blob对象的基本方法:

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

d07ba7b9908378e128011d0630e24d93.png

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

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

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

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

c86c7413cd0525cb5d0b70f80f7867cb.png

利用Blob显示缩略图`

45bc2829eb8404fc99e0dd578c1292f9.png

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

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

参与评论 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:1024 设计师:我叫白小胖 返回首页

打赏作者

HRGO

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值