[HTML5] Blob对象

àì夳堔傛蜴生んèń 2021-06-26 16:06 462阅读 0赞

## 写在前面 ##

本篇主要总结`Blob`对象属性及作用，通过DEMO介绍`Blob`对象的应用场景。

## `Blob`对象 ##

一直以来，`JS`都没有比较好的可以直接处理二进制的方法。而`Blob`的存在，允许我们可以通过`JS`直接操作二进制数据。

> 一个`Blob`对象就是一个包含有只读原始数据的类文件对象。`Blob`对象中的数据并不一定得是`JavaScript`中的原生形式。`File`接口基于`Blob`，继承了`Blob`的功能,并且扩展支持了用户计算机上的本地文件。

`Blob`对象可以看做是存放二进制数据的容器，此外还可以通过`Blob`设置二进制数据的MIME类型。

### 创建`Blob` ###

通过构造函数

var blob = new Blob(dataArr:Array<any>, opt:{ type:string});

*  `dataArray`：数组，包含了要添加到`Blob`对象中的数据，数据可以是任意多个`ArrayBuffer`，`ArrayBufferView`，`Blob`，或者 `DOMString`对象。
 *  `opt`：对象，用于设置`Blob`对象的属性（如：`MIME`类型）

1、创建一个装填`DOMString`对象的`Blob`对象  
![在这里插入图片描述][20190720000426489.png]  
2、创建一个装填`ArrayBuffer`对象的`Blob`对象  
![在这里插入图片描述][20190720000456361.png]  
3、创建一个装填`ArrayBufferView`对象的`Blob`对象（`ArrayBufferView`可基于`ArrayBuffer`创建，返回值是一个类数组。如下：创建一个8字节的`ArrayBuffer`，在其上创建一个每个数组元素为2字节的“视图”）  
![在这里插入图片描述][20190720000530381.png]

### 通过`Blob.slice()` ###

此方法返回一个新的`Blob`对象，包含了原`Blob`对象中指定范围内的数据

Blob.slice(start:number, end:number, contentType:string)

*  `start`：开始索引，默认为0
 *  `end`：截取结束索引（不包括end）
 *  `contentType`：新`Blob`的`MIME`类型，默认为空字符串  
    ![在这里插入图片描述][20190720000643360.png]

### 通过`canvas.toBlob()` ###

var canvas = document.getElementById("canvas");
    canvas.toBlob(function(blob){ 
        console.log(blob);
    });

![在这里插入图片描述][20190720000717356.png]

## 应用场景 ##

前面提到，`File`接口基于`Blob`，继承了`Blob`的功能并进行了扩展，故我们可以像使用`Blob`一样使用`File`对象。

### 分片上传 ###

通过`Blob.slice`方法，可以将大文件分片，轮循向后台提交各文件片段，即可实现文件的分片上传。  
分片上传逻辑如下：

*  获取要上传文件的`File`对象，根据`chunk`（每片大小）对文件进行分片
 *  通过`post`方法轮循上传每片文件，其中`url`中拼接`querystring`用于描述当前上传的文件信息；`post body`中存放本次要上传的二进制数据片段
 *  接口每次返回`offset`，用于执行下次上传

下面是分片上传的简单实现：

initUpload();
    
    //初始化上传
    function initUpload() { 
        var chunk = 100 * 1024;   //每片大小
        var input = document.getElementById("file");    //input file
        input.onchange = function (e) { 
            var file = this.files[0];
            var query = { };
            var chunks = [];
            if (!!file) { 
                var start = 0;
                //文件分片
                for (var i = 0; i < Math.ceil(file.size / chunk); i++) { 
                    var end = start + chunk;
                    chunks[i] = file.slice(start , end);
                    start = end;
                }
                
                // 采用post方法上传文件
                // url query上拼接以下参数，用于记录上传偏移
                // post body中存放本次要上传的二进制数据
                query = { 
                    fileSize: file.size,
                    dataSize: chunk,
                    nextOffset: 0
                }
    
                upload(chunks, query, successPerUpload);
            }
        }
    }
    
    // 执行上传
    function upload(chunks, query, cb) { 
        var queryStr = Object.getOwnPropertyNames(query).map(key => { 
            return key + "=" + query[key];
        }).join("&");
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "http://xxxx/opload?" + queryStr);
        xhr.overrideMimeType("application/octet-stream");
        
        //获取post body中二进制数据
        var index = Math.floor(query.nextOffset / query.dataSize);
        getFileBinary(chunks[index], function (binary) { 
            if (xhr.sendAsBinary) { 
                xhr.sendAsBinary(binary);
            } else { 
                xhr.send(binary);
            }
    
        });
    
        xhr.onreadystatechange = function (e) { 
            if (xhr.readyState === 4) { 
                if (xhr.status === 200) { 
                    var resp = JSON.parse(xhr.responseText);
                    // 接口返回nextoffset
                    // resp = { 
                    // isFinish:false,
                    // offset:100*1024
                    // }
                    if (typeof cb === "function") { 
                        cb.call(this, resp, chunks, query)
                    }
                }
            }
        }
    }
    
    // 每片上传成功后执行
    function successPerUpload(resp, chunks, query) { 
        if (resp.isFinish === true) { 
            alert("上传成功");
        } else { 
            //未上传完毕
            query.offset = resp.offset;
            upload(chunks, query, successPerUpload);
        }
    }
    
    // 获取文件二进制数据
    function getFileBinary(file, cb) { 
        var reader = new FileReader();
        reader.readAsArrayBuffer(file);
        reader.onload = function (e) { 
            if (typeof cb === "function") { 
                cb.call(this, this.result);
            }
        }
    }

以上是文件分片上传前端的简单实现，当然，此功能还可以更加完善，如后台需要对合并后的文件大小进行校验；或者前端加密文件，全部上传完毕后后端解密校验等，此处不做赘述。

### 通过`url`下载文件 ###

`window.URL`对象可以为`Blob`对象生成一个网络地址，结合`a`标签的`download`属性，可以实现点击`url`下载文件  
实现如下：

createDownload("download.txt","download file");
    
    function createDownload(fileName, content){ 
        var blob = new Blob([content]);
        var link = document.createElement("a");
        link.innerHTML = fileName;
        link.download = fileName;
        link.href = URL.createObjectURL(blob);
        document.getElementsByTagName("body")[0].appendChild(link);
    }

执行后页面上会生成此`Blob`对象的地址，点击后可下载：  
![在这里插入图片描述][20190720001252583.png]  
查看下载结果：  
![在这里插入图片描述][20190720001324754.png]

### 通过`url`显示图片 ###

我们知道，`img`的`src`属性及`background`的`url`属性，都可以通过接收图片的网络地址或`base64`来显示图片，同样的，我们也可以把图片转化为`Blob`对象，生成`URL`（`URL.createObjectURL(blob)`），来显示图片。  
![在这里插入图片描述][20190720001443127.png]

## 小结 ##

本文主要介绍了`Blob`对象的属性和使用场景，其实我们可以看到，`Blob`对象作为一个装填二进制数据的基本对象，其作用也仅仅是一个容器，而真正的业务功能则需要通过`FileReader、URL、Canvas`等对象实现，之后会继续对这些对象的功能和应用场景进行归纳。

[20190720000426489.png]: /images/20210626/9b8ea19d7a5a4834bab597075644a1b5.png
[20190720000456361.png]: /images/20210626/a2b5f6fecd55431598febcf5e74d6cce.png
[20190720000530381.png]: /images/20210626/67923b3e92a3451bb1b80bdf3e5aa0c9.png
[20190720000643360.png]: /images/20210626/21877d3d670642a886480b3b5b6792ce.png
[20190720000717356.png]: /images/20210626/544cdf6ac16246bb9b08431e84d35ebf.png
[20190720001252583.png]: /images/20210626/7ad838ab49784ef4832b5fb570df0052.png
[20190720001324754.png]: /images/20210626/8f88f9b78c604464abcf76a237da84aa.png
[20190720001443127.png]: /images/20210626/f7230566054d4a9c82c121d3fde1344a.png