js中关于Blob对象的介绍与使用

blob对象介绍

一个 Blob对象表示一个不可变的, 原始数据的相似文件对象。Blob表示的数据不必定是一个JavaScript原生格式 blob对象本质上是js中的一个对象，里面能够储存大量的二进制编码格式的数据。

---

建立blob对象

建立blob对象本质上和建立一个其余对象的方式是同样的，都是使用Blob() 的构造函数来进行建立。 构造函数接受两个参数：

第一个参数为一个数据序列，能够是任意格式的值。

第二个参数是一个包含两个属性的对象{ type: MIME的类型, endings: 决定第一个参数的数据格式，能够取值为 "transparent" 或者 "native"（transparent的话不变，是默认值，native 的话按操做系统转换） 。 }

Blob()构造函数容许使用其余对象建立一个Blob对象，好比用字符串构建一个blob

var debug = {hello: "world"};
var blob = new Blob([JSON.stringify(debug, null, 2)],
  {type : 'application/json'});

既然是对象，那么blob也拥有本身的属性以及方法

属性

• Blob.isClosed (只读)

  布尔值，指示 Blob.close() 是否在该对象上调用过。 关闭的 blob 对象不可读。

• Blob.size (只读)

  Blob 对象中所包含数据的大小（字节）。

• Blob.type (只读)

  一个字符串，代表该Blob对象所包含数据的MIME类型。若是类型未知，则该值为空字符串。

方法

• Blob.close()

  关闭 Blob 对象，以便能释放底层资源。

• Blob.slice([start[, end[, contentType]]])

  返回一个新的 Blob 对象，包含了源 Blob 对象中指定范围内的数据。其实就是对这个blob中的数据进行切割，咱们在对文件进行分片上传的时候须要使用到这个方法。

看到上面这些方法和属性，使用过HTML5提供的File接口的应该都很熟悉，这些属性和方法在File接口中也都有。 其实File接口就是基于Blob，继承blob功能并将其扩展为支持用户系统上的文件，也就是说：

File接口中的Flie对象就是继承与Blob对象。

blob对象的使用

上面说了不少关于Blob对象的一些概念性的东西，下面咱们来看看实际用途。

---

分片上传

首先说说分片上传，咱们在进行文件上传的时候，由于服务器的限制，会限制每一次上传到服务器的文件大小不会很大，这个时候咱们就须要把一个须要上传的文件进行切割，而后分别进行上传到服务器。

假如须要作到这一步，咱们须要解决两个问题:

• 怎么切割?
• 怎么得知当前传输的进度?

首先怎么切割的问题上面已经有过说明，由于File文件对象是继承与Blob对象的，所以File文件对象也拥有slice这个方法，咱们可使用这个方法将任何一个File文件进行切割。

代码以下：

var BYTES_PER_CHUNK = 1024 * 1024; // 每一个文件切片大小定为1MB .
var blob = document.getElementById("file").files[0];
var slices = Math.ceil(blob.size / BYTES_PER_CHUNK);
var blobs = [];
slices.forEach(function(item, index) {
    blobs.push(blob.slice(index,index + 1));
});

经过上面的方法。咱们就获得了一个切割以后的File对象组成的数组blobs；

接下来要作的时候就是讲这些文件分别上传到服务器。

在HTTP1.1以上的协议中，有Transfer-Encoding这个编码协议，用以和服务器通讯，来得知当前分片传递的文件进程。

这样解决了这两个问题，咱们不只能够对文件进行分片上传，而且可以获得文件上传的进度。

粘贴图片

blob还有一个应用场景，就是获取剪切板上的数据来进行粘贴的操做。例如经过QQ截图后，须要在网页上进行粘贴操做。

粘贴图片咱们须要解决下面几个问题

1. 监听用户的粘贴操做

2. 获取到剪切板上的数据

3. 将获取到的数据渲染到网页中

首先咱们能够经过paste事件来监听用户的粘贴操做:

document.addEventListener('paste', function (e) {
    console.info(e);
});

而后经过事件对象中的clipboardData 对象来获取图片的文件数据。

clipboardData对象介绍

介绍一下 clipboardData 对象，它其实是一个 DataTransfer 类型的对象， DataTransfer 是拖动产生的一个对象，但实际上粘贴事件也是它。

clipboardData 的属性介绍

属性	类型	说明
dropEffect	String	默认是 none
effectAllowed	String	默认是 uninitialized
files	FileList	粘贴操做为空List
items	DataTransferItemList	剪切板中的各项数据
types	Array	剪切板中的数据类型 该属性在Safari下比较混乱

items 介绍

items 是一个 DataTransferItemList 对象，天然里面都是 DataTransferItem 类型的数据了。

属性

items 的 DataTransferItem 有两个属性 kind 和 type

属性	说明
kind	通常为 string 或者 file
type	具体的数据类型，例如具体是哪一种类型字符串或者哪一种类型的文件，即 MIME-Type

方法

方法	参数	说明
getAsFile	空	若是 kind 是 file ，能够用该方法获取到文件
getAsString	function(str)	若是 kind 是 string ，能够用该方法获取到字符串str

在原型上还有一些其余方法，不过在处理剪切板操做的时候通常用不到了。

type 介绍

通常 types 中常见的值有 text/plain 、 text/html 、 Files 。

值	说明
text/plain	普通字符串
text/html	带有样式的html
Files	文件(例如剪切板中的数据)

有了上面这些方法，咱们能够解决第二个问题即获取到剪切板上的数据。

document.addEventListener('paste', function (e) {
    console.info(e);
    var cbd = e.clipboardData;
    for(var i = 0; i < cbd.items.length; i++) {
        var item = cbd.items[i];
        console.info(item);
        if(item.kind == "file"){
            var blob = item.getAsFile();
            if (blob.size === 0) {
                return;
            }
            console.info(blob);
        }
    }
});

最后咱们须要将获取到的数据渲染到网页上。

其实这个本质上就是一个相似于上传图片本地浏览的问题。咱们能够直接经过HTML5的File接口将获取到的文件上传到服务器而后经过讲服务器返回的url地址来对图片进行渲染。也可使用fileRender对象来进行图片本地浏览。

fileRender对象简介

从Blob中读取内容的惟一方法是使用 FileReader。

FileReader接口有4个方法，其中3个用来读取文件，另外一个用来中断读取。不管读取成功或失败，方法并不会返回读取结果，这一结果存储在result属性中。

方法名	参数	描述
readAsBinaryString	file	将文件读取为二进制编码
readAsText	file,[encoding]	将文件读取为文本
readAsDataURL	file	将文件读取为DataURL
abort	(none)	终端读取操做

FileReader接口包含了一套完整的事件模型，用于捕获读取文件时的状态。

事件	描述
onabort	中断
onerror	出错
onloadstart	开始
onprogress	正在读取
onload	成功读取
onloadend	读取完成，不管成功失败

经过上面的方法以及事件，咱们能够发现，经过readAsDataURL方法及onload事件就能够拿到一个可本地浏览图片的DataURL。

最终代码以下：

document.addEventListener('paste', function (e) {
    console.info(e);
    var cbd = e.clipboardData;
        var fr = new FileReader();
        var html = '';
        for(var i = 0; i < cbd.items.length; i++) {
            var item = cbd.items[i];
            console.info(item);
            if(item.kind == "file"){
                var blob = item.getAsFile();
                if (blob.size === 0) {
                    return;
                }
                console.info(blob);
                fr.readAsDataURL(blob);
                fr.on<x>load=function(e){
                    var result=document.getElementById("result");
                    //显示文件
                    result.innerHTML='<img src="' + this.result +'" alt="" />';
                }
            }
        }
});

这样咱们就能够监听到用户的粘贴操做，而且将用户粘贴的图片文件实时的渲染到网页之中了。

总结

以上是我对Blob对象的一些学习分享，但愿在实际应用上能对你们有所帮助。