HTML5 Blob对象的具体使用

写在前面

本篇主要总结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对象

2、创建一个装填arraybuffer对象的blob对象

3、创建一个装填arraybufferview对象的blob对象（arraybufferview可基于arraybuffer创建，返回值是一个类数组。如下：创建一个8字节的arraybuffer，在其上创建一个每个数组元素为2字节的“视图”）

通过blob.slice()

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

blob.slice(start:number, end:number, contenttype:string)

start：开始索引，默认为0
end：截取结束索引（不包括end）
contenttype：新blob的mime类型，默认为空字符串

var canvas = document.getelementbyid("canvas");
canvas.toblob(function(blob){
    console.log(blob);
});

应用场景

前面提到，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对象的地址，点击后可下载：

查看下载结果：

通过url显示图片

我们知道，img的src属性及background的url属性，都可以通过接收图片的网络地址或base64来显示图片，同样的，我们也可以把图片转化为blob对象，生成url（url.createobjecturl(blob)），来显示图片。

小结

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

参考资料

[1] mdn_blob
[2] w3c working draft

到此这篇关于html5 blob对象的具体使用的文章就介绍到这了,更多相关html5 blob对象内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！