小伙子，留在这里，预览图小伙子

，我看你骨子里都是玲珑，是绝世武林奇才。我有这本《图片流》秘籍，见到你就给你。图片流本文所说的图片流就是读取本地的图片，使用文件流的方式显示在页面上。首先简单说一下上传文件的几种方式，然后依次实现。input被用户点击创建，监听change事件获取文件对象，大致如下click=()=>{letinput=document.createElement('input')input.setAttribute('type','file')input.setAttribute('accept','image/*')input.onchange=event=>{letfile=event.target.files[0]}input.click()}Drag&&drop使用HTML5拖放API监听元素的drop事件，同样的方式获取文件对象会创建一个DataTransfer对象，下面我们会遇到，后面再说dragover=event=>{event.preventDefault()}drop=event=>{event.preventDefault()letfiles=event.dataTransfer.files}paste将粘贴事件绑定到元素上，谢谢tocontenteditable我们可以添加到所有元素，声音还是一样，获取事件中包含的filepaste=(e)=>{e.preventDefault()letfile=e.clipboardData.files[0]}clipboardDatapaste事件提供clipboardData属性是DataTransfer类型的对象。前面我们说过，拖拽会生成一个DataTransfer对象。是的，粘贴也是它。来，来，掀起她的头巾。上面可以看到，clipboardData有如下几个属性dropEffect，默认是nodeeffectAllowed，默认是uninitializedfiles，本地文件列表项，剪贴板中的数据类型，剪贴板中的数据类型。我们只需要用到文件，图片文件在里面里面的文件格式通常是，File对象来自用户在元素上选择文件后返回的FileList对象，也可以来自拖拽操作生成的DataTransfer对象，继承了Blob庐山的真面目，promise，就是Thisway。可以看到如下属性：name：文件名，这个属性是只读的。size：文件大小，以字节为单位，该属性只读。类型：文件的MIME类型。如果无法区分类型，则为空字符串。该属性是只读的。lastModified：文件的最后修改时间，时间戳格式。lastModifiedDate：文件的最后修改时间，格式为Date对象实例。我们不深入文件对象，我们只需要知道它可以访问本地文件。blob一个Blob对象代表一个不可变的、类似文件的原始数据对象。Blob表示的数据不一定是JavaScript原生格式。File接口基于Blob，继承了Blob的功能并将其扩展为支持用户系统上的文件。创建一个blob对象varaBlob=newBlob(array,options);array是由ArrayBuffer、ArrayBufferView、Blob、DOMString等对象组成的Array，或者是其他类似对象的混合体，会被放入Blob中。options是一个可选的blob，熟悉的字典，可以指定下面两个属性type，默认值为""，表示将放入blob中的数组内容的MIME类型。endings，默认值为“transparent”，表示包含行终止符n的字符串如何输出。vara=["你好","世界"];varmyBlob=newBlob(a,{"type":"text/xml"});控制台日志（myBlob）；通过动态创建blob，我们可以实现纯前端下载constfoo={hello:"world"};constblob=newBlob([JSON.stringify(foo)],{type:"text/plain"});constfileName=`${Date.now()}.doc`;constlink=document.createElement('a');link.href=URL.createObjectURL(blob);link.download=fileName;link.click();URL.revokeObjectURL(link.href);BlobURLBlobURL是blob协议的URL，格式如下blob：http://localhost:1234/946644c4-ca98-405e-918c-759e790d0330BlobURL可以通过创建URL.createObjectURL(blob)，并且每次调用createObjectURL()方法时，都会创建一个新的URL对象，即使您已经使用相同的对象作为参数创建了它。当不需要这些URL对象时，通过URL.revokeObjectURL(objectURL)释放URL对象，使用BlobURL显示本地图片。我们只需要将创建的URL赋值给img的src属性即可。FileReaderFileReader用于读取文件或blob文件数据，根据文件大小不同，读取过程是异步的。letrender=newFileReader()render.onload=()=>{letsrc=render.result}render.readAsDataURL(file)FileReader读取文件方法readAsBinaryString文件读取文件作为二进制编码readAsBinaryArray文件读取文件作为二进制数组readAsText文件[,encoding]按格式读取文件为文本，编码默认为UTF-8readAsDataURL文件读取文件为DataUrlbase64使用FileReader读取文件，可以将图片读取成base64格式。在FileReader实例的onload函数中直接将结果赋值给src。格式的区别其实主要是两种格式：base64和blob。它们之间的区别如下。BlobURL的长度通常较短。BlobURL可以很方便的使用XMLHttpRequest获取源数据，base64并不是所有浏览器都支持BlobURL只能在当前应用内使用的格式之间进行转换.log(blobObj)})canvas被转换为base64letimgSrc=canvas.toDataURL('image/png')base64toblobfunctiondataURLtoBlob(dataurl){letarr=dataurl.split(",");让mime=arr[0].match(/:(.*?);/)[1];让bstr=atob(arr[1]);让n=bstr。长度;让u8arr=newUint8Array(n);而(n--){u8arr[n]=bstr。字符代码（n）；}returnnewBlob([u8arr],{type:mime});}参考前端使用Blob对象创建指定文件，下载DataURL与File、Blob、canvas对象相互转换的完整代码。请点击github，周末愉快。