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