本文摘自AwesomeCheatSheet/DOMCheatSheet，主要简单介绍DOM操作中常见的Blob和FileAPI相关概念。Web开发中Blob和FileAPI的使用简介Blob是JavaScript中的一个对象，表示一个不可变的类文件对象，可以以二进制编码格式存储大量数据。创建Blob对象的方法与其他方法没有什么不同。构造函数可以接受两个参数：数据序列和类型描述：constdebug={hello:'world'};letblob=newBlob([JSON.stringify(debug,null,2)],{type:'application/json'});//Blob(22){size:22,type:"application/json"}//也可以转换成类似URL的格式consturl=URL.createObjectURL(blob);//"blob:https://developer.mozilla.org/88c5b6de-3735-4e02-8937-a16cc3b0e852"//设置一个自定义样式类blob=newBlob(['body{background-color:yellow;}'],{type:'text/css'});link=document.createElement('link');link.rel='stylesheet';//createObjectURL返回一个blobURL作为string.link.href=URL.createObjectURL(blob);其他类型转换为Blob对象，请参考covertToBlob.js将Base64编码的字符串或DataUrl转换为Blob对象。Blob包括大小和类型等属性，常用的slice方法进行拦截。Blob对象可以添加到表单并用作上传数据：constcontent='hey!';//新文件的主体...constblob=newBlob([content],{type:'text/xml'});formData.append('webmasterfile',blob);slice方法将返回一个新的Blob对象，其中包含源blob对象中指定范围内的数据。其实就是对这个blob中的数据进行切割。我们在分片上传文件的时候需要用到这种方式，即将需要上传的文件剪切一个，然后单独上传到服务器：constBYTES_PER_CHUNK=1024*1024;//每个文件切片大小设置为1MB.constblob=document.getElementById('file').files[0];constslices=Math.ceil(blob.size/BYTES_PER_CHUNK);constblobs=[];Array.from({length:slices}).forEach(function(item,index){blobs.push(blob.slice(index,index+1));});我们这里使用的blob对象实际上是HTML5File对象；HTML5FileAPI允许我们读取和上传本地文件，主要包括三个对象：File、FileList和FileReader，用于读取数据。File对象是Blob的一个分支，或者一个子集，表示包含一些元数据的单个文件对象；FileList是文件对象的列表。FileReader可用于从Blob对象中读取数据，并包含一系列读取文件的方法和事件回调。它的基本用法如下：constreader=newFileReader();reader.addEventListener('loadend',function(){//reader.result包含TypedArray格式的Blob内容});reader.readAsArrayBuffer(blob);blob=newBlob(['这是我的blob内容'],{type:'text/plain'});read.readAsText(bolb);//Readastext//reader.readAsArrayBuffer//将读取的结果封装到ArrayBuffer中，如果要使用，需要转成Int8Array或者DataView//reader.readAsBinaryString//IE浏览器不支持改方法//reader.readAsTex//该方法有两个参数，第二个参数为文本的编码方式，默认值为UTF-8//reader.readAsDataURL//读取结果为DataURL//reader.readyState//上传状态在图片上传中，我们经常需要获取本地图片的预览，参考antd/Upload中的处理：//读取文件为DataURLconstpreviewFile=(file:File,callback:Function)=>{constreader=newFileReader();reader.onloadend=()=>callback(reader.result);reader.readAsDataURL(file);};//设置文件的DataUrlpreviewFile(file.originFileObj,(previewDataUrl:string)=>{file.thumbUrl=previewDataUrl;});//JSX;另一种常用的场景是获取剪贴板中的图片并进行预览，可以参考coding-snippets/image-paste:constcbd=e.clipboardData;constfr=newFileReader();for(leti=0;i
