当前位置:   article > 正文

JavaScript 之 Blob 对象类型_js blob type

js blob type

 Duang,最近搭建了一个自己的博客小破站,欢迎各位小伙伴来访吖:ares-coder-blog-portalhttps://www.ares-stack.cn/blog_service/#/game    


        Blob(Binary Large Object)术语最初来自数据库(oracle 中也有类似的栏位类型。),早期数据库因为要存储声音、图片、以及可执行程序等二进制数据对象所以给该类对象取名为Blob。 
       在Web领域,Blob被定义为包含只读数据的类文件对象。Blob中的数据不一定是js原生数据形式。常见的File接口就继承自Blob,并扩展它用于支持用户系统的本地文件。

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

  1. 通过Blob对象的构造函数来构建。
  2. 从已有的Blob对象调用slice接口切出一个新的Blob对象。
  3. canvas API toBlob方法,把当前绘制信息转为一个Blob对象。下面只看第一种的实现:

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

var blob = new Blob(array[optional], options[optional]);

构造函数,接受两个参数

  • 第一个参数:为一个数据序列,可以是任意格式的值,例如,任意数量的字符串,Blobs 以及 ArrayBuffers。
  • 第二个参数:用于指定将要放入Blob中的数据的类型(MIME)(后端可以通过枚举MimeType,获取对应类型:
    MimeType mimeType = MimeType.toEnum(file.getContentType());)。
  1. <script>
  2. var blob = new Blob(["Hello World!"],{type:"text/plain"});
  3. </script>

Blob对象的基本属性:

  • size :Blob对象包含的字节数。(只读)
  • type : Blob对象包含的数据类型MIME,如果类型未知则返回空字符串。

Blob对象的基本方法: 

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

Blob.slice([start, [end, [content-type]]])

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

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

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

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

  1. function sliceBlob(blob, start, end, type) {
  2. type = type || blob.type;
  3. if (blob.mozSlice) {
  4. return blob.mozSlice(start, end, type);
  5. } else if (blob.webkitSlice) {
  6. return blob.webkitSlice(start, end type);
  7. } else {
  8. throw new Error("This doesn't work!");
  9. }
  10. }

参考来源于:

Blob_Luncher的博客-CSDN博客

[JS进阶] JS 之Blob 对象类型_js判断响应对象是否为blob_oscar999的博客-CSDN博客

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/AllinToyou/article/detail/144947
推荐阅读
相关标签
  

闽ICP备14008679号