blob对象介绍及相关应用

栏目: Html5 · 发布时间: 6年前

内容简介:后面有时间总结一下react相关知识和性能优化的东西,这些东西总结起来要花些时间。一直没有时间总结。今天的这个问题也是项目中用到的,之前没有写过,写在博客中,有需要的自取。主要是js流文件blob介绍及相关应用。关于MIME类型,其实不需要记,用的时候查阅一下就可以了,我之前在文件上传的时候列举过一些,需要的可以点击查看除了这些,我再补充几个

前言

后面有时间总结一下react相关知识和性能优化的东西,这些东西总结起来要花些时间。一直没有时间总结。今天的这个问题也是项目中用到的,之前没有写过,写在博客中,有需要的自取。主要是js流文件blob介绍及相关应用。

Blob对象

var blob = new Blob(dataArr:Array<any>, opt:{type:string});
dataArray:数组,包含了要添加到Blob对象中的数据,数据可以是任意多个ArrayBuffer,ArrayBufferView, Blob,或者 DOMString对象。
opt:对象,用于设置Blob对象的属性(如:MIME类型)

关于MIME类型,其实不需要记,用的时候查阅一下就可以了,我之前在文件上传的时候列举过一些,需要的可以点击查看

除了这些,我再补充几个

.dot    application/msword
.docx    application/vnd.openxmlformats-officedocument.wordprocessingml.document
.dotx    application/vnd.openxmlformats-officedocument.wordprocessingml.template
.docm    application/vnd.ms-word.document.macroEnabled.12
.dotm    application/vnd.ms-word.template.macroEnabled.12
.xls    application/vnd.ms-excel
.xlt    application/vnd.ms-excel
.xla    application/vnd.ms-excel
.xlsx    application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.xltx    application/vnd.openxmlformats-officedocument.spreadsheetml.template
.xlsm    application/vnd.ms-excel.sheet.macroEnabled.12
.xltm    application/vnd.ms-excel.template.macroEnabled.12
.xlam    application/vnd.ms-excel.addin.macroEnabled.12
.xlsb    application/vnd.ms-excel.sheet.binary.macroEnabled.12
.ppt    application/vnd.ms-powerpoint
.pot    application/vnd.ms-powerpoint
.pps    application/vnd.ms-powerpoint
.ppa    application/vnd.ms-powerpoint
.pptx    application/vnd.openxmlformats-officedocument.presentationml.presentation
.potx    application/vnd.openxmlformats-officedocument.presentationml.template
.ppsx    application/vnd.openxmlformats-officedocument.presentationml.slideshow

这些主要是office相关的,其他的请看我之前的文章。

1、创建一个装填DOMString对象的Blob对象

let haorooms ="<div>hello haorooms</div>";
let blob = new Blob([haorooms],{type:'text/xml'})
blob

//Blob(25) {size: 25, type: "text/xml"}

2、创建一个装填ArrayBuffer对象的Blob对象

let haorooms =new ArrayBuffer(8);
let blob = new Blob([haorooms],{type:'text/plain'})
blob
// 输出:Blob(8) {size: 8, type: "text/plain"}

3、Blob.slice()

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

start:开始索引,默认为0
end:截取结束索引(不包括end)
contentType:新Blob的MIME类型,默认为空字符串

例子:

let blob = new Blob(['haorooms ceshi duixiadasdadadad'],{type:'text/plain'})
let b2 = blob.slice(0,5,'text/plain')
b2
Blob(5) {size: 5, type: "text/plain"}

4、canvas.toBlob()

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

预览canvas

blob应用

1、通过url显示图片

我们上传文件预览,一般都是预览blob对象路径。 img的src属性及background的url属性,都可以通过接收图片的网络地址或base64来显示图片,同样的,我们也可以把图片转化为Blob对象,生成URL(URL.createObjectURL(blob)),来显示图片。

2、文件下载

假如后端返回的是二进制的流文件编码,我们可以通过blob来下载

this.$http.get('请求地址', { params: params, responseType: 'arraybuffer' }).then(response => {
      var data = new Blob([response.body], { type: 'application/ms-excel' })// type也可以用application/vnd.ms-excel 按照上面的
      var downloadUrl = window.URL.createObjectURL(data)
      var anchor = document.createElement('a')
      anchor.href = downloadUrl
      anchor.download = `文件名${new Date().getTime()}.xls`
      anchor.click()
      window.URL.revokeObjectURL(data)
    })

3、文件分片上传

通过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);
        }
    }
}

以上所述就是小编给大家介绍的《blob对象介绍及相关应用》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

暗网

暗网

杰米·巴特利特 / 刘丹丹 / 北京时代华文书局 / 2018-7 / 59.00

全面深入揭秘“黑暗版淘宝”暗网的幕后世界和操纵者 现实中所有的罪恶,在暗网中,都是明码标价的商品。 暗杀、色情、恋童癖、比特币犯罪、毒品交易…… TED演讲、谷歌特邀专家、英国智库网络专家杰米•巴特利特代表作! 1、 被大家戏称为“黑暗版淘宝”的暗网究竟是什么?微信猎奇 文不能告诉你的真相都在这里了! 2、 因章莹颖一案、Facebook信息泄露危机而被国人所知的暗网......一起来看看 《暗网》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具