JavaScript之Blob对象基本用法及分片上传示例

Blob基本用法

创建

通过Blob的构造函数创建Blob对象：

new Blob(blobParts[, options])

blobParts：数组类型，数组中的每一项连接起来构成Blob对象的数据，数组中的每项元素可以是ArrayBuffer(二进制数据缓冲区), ArrayBufferView,Blob,DOMString。或其他类似对象的混合体。

options：可选项，字典格式类型，可以指定如下两个属性：

type，默认值为""，它代表了将会被放入到blob中的数组内容的MIME类型。
endings，默认值为"transparent"，用于指定包含行结束符\n的字符串如何被写入。它是以下两个值中的一个： "native"，表示行结束符会被更改为适合宿主操作系统文件系统的换行符； "transparent"，表示会保持blob中保存的结束符不变。

实例：

var data1 = "a";

    var data2 = "b";

    var data3 = "<div style='color:red;'>This is a blob</div>";

    var data4 = { "name": "abc" };

    var blob1 = new Blob([data1]);

    var blob2 = new Blob([data1, data2]);

    var blob3 = new Blob([data3]);

    var blob4 = new Blob([JSON.stringify(data4)]);

    var blob5 = new Blob([data4]);

    var blob6 = new Blob([data3, data4]);

    console.log(blob1);  //输出：Blob {size: 1, type: ""}

    console.log(blob2);  //输出：Blob {size: 2, type: ""}

    console.log(blob3);  //输出：Blob {size: 44, type: ""}

    console.log(blob4);  //输出：Blob {size: 14, type: ""}

    console.log(blob5);  //输出：Blob {size: 15, type: ""}

    console.log(blob6);  //输出：Blob {size: 59, type: ""}

size代表Blob 对象中所包含数据的字节数。

blob4使用通过JSON.stringify把data4对象转换成json字符串，JSON.stringify(data4)的结果为："{"name":"abc"}"，正好14个字节(不包含最外层的引号)；

blob5的结果为15，是由于普通对象创建Blob对象时，相当于调用了普通对象的toString()方法得到字符串数据，然后再创建Blob对象。所以，blob5保存的数据是"[object Object]"，是15个字节(不包含最外层的引号)。

slice方法

Blob对象有一个slice方法，返回一个新的Blob对象，包含了源Blob对象中制定范围内的数据。
参数说明：

start：可选，代表 Blob 里的下标，表示第一个会被会被拷贝进新的 Blob 的字节的起始位置。如果传入的是一个负数，那么这个偏移量将会从数据的末尾从后到前开始计算。
end：可选，代表的是 Blob 的一个下标，这个下标-1的对应的字节将会是被拷贝进新的Blob 的最后一个字节。如果你传入了一个负数，那么这个偏移量将会从数据的末尾从后到前开始计算。
contentType：可选，给新的 Blob 赋予一个新的文档类型。这将会把它的 type 属性设为被传入的值。它的默认值是一个空的字符串。

例如：

 var data = "abcdef";

 var blob1 = new Blob([data]);

 var blob2 = blob1.slice(0,3);

 console.log(blob1);  //输出：Blob {size: 6, type: ""}

 console.log(blob2);  //输出：Blob {size: 3, type: ""}

Blob分片上传应用

使用slice方法对大文件进行分片上传：

function uploadFile(file) {

  var chunkSize = 1024 * 1024; //每片1M大小

  var totalSize = file.size;

  var chunkQuantity = Math.ceil(totalSize/chunkSize); //分片总数

  var offset = 0; //偏移量

  var reader = new FileReader();

  reader.onload = function(e) {

    var xhr = new XMLHttpRequest();

    xhr.open("POST", url);

    xhr.overrideMineType("application/octet-stream");

    xhr.onreadstatechange = function() {

      if(xhr.readyState === 4 && xhr.status ===200) {

        ++offset;

        if(offset === chunkQuantity) {

          alerrt("上传完成");

        } else if(offset === chunckQuantity-1) {

          blob = file.slice(offset*chunkSize, totalSize);

          reader.readAsBinaryString(blob);

        } else {

          blob = file.slice(offset*chunkSize, (offset+1)*chunckSize);

          reader.readAsBinaryString(blob);

        }

      }else {

        alert("上传出错")；

      }

    }

    if(xhr.sendAsBinary) {

      xhr.sendAsBinary(e.target.result);

    } else {

      xhr.send(e.target.result);

    }

  }

  var blob = file.slice(0, chunkSize);

  reader.readAsBinaryString(blob);

}

原文地址：https://www.cnblogs.com/cheng825/p/11694348.html