内容简介:后面有时间总结一下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对象介绍及相关应用》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- Android里应用程序,应用程序窗口和视图对象之间的关系
- 翻译: JavaScript中对象解构的3种实际应用
- 第十一天-《企业应用架构模式》-对象-关系行为模式
- 把对象交给 Spring 管理的 3 种方法及经典应用
- 七分钟读懂 Go 的临时对象池pool及其应用场景
- 在LAMP架构中安装Memcached高性能内存对象缓存应用(内含所有源码包)
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。