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对象介绍及相关应用》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

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

构建高可用Linux服务器(第3版)

构建高可用Linux服务器(第3版)

余洪春 / 机械工业出版社 / 2014-10 / 79.00元

《构建高可用Linux服务器(第3版)》是Linux运维领域公认的经典畅销书,是国内51CTO、IT168等知名网站和多位资深运维专家共同推荐的运维工程师必备的工具书! “酒哥”在Linux运维领域潜心实践近10年,一直在运维一线,技术和思维都紧跟时代的发展,非常清楚运维工程师们需要什么,应该学习什么。本书不仅是他近10年工作经验的结晶,同时也是他的数万名读者和数十万粉丝共同需求和集体智慧的......一起来看看 《构建高可用Linux服务器(第3版)》 这本书的介绍吧!

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换