window.FileReader和window.URL.revokeObjectURL·实用技巧

一、基础认识

FileReader对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用File或Blob对象指定要读取的文件或数据。通过FileReader()返回一个新的构造函数。

URL.revokeObjectURL()静态方法用来释放一个之前通过调用URL.createObjectURL()创建的已经存在的 URL 对象。当你结束使用某个 URL 对象时，应该通过调用这个方法来让浏览器知道不再需要保持这个文件的引用了。

二、应用场景

当获取图片素材的同时，还需要获取responseheaders 中的某些自定义的返回值。

vcodeid: 需要验证的时候返回给后端

vccodestring: 在页面展示的中文提示

给人的第一映像是，项目中使用什么方式请求接口，那么同样的方法炮制。——这里使用 ajax

第一步：从 response headers 获取关键内容；本地存储vcodeid，vccodestring显示在页面上。

第二步：把 response data 展示在页面上；那么问题来了，data 是神马样的格式呢？据说是 【二进制流】。

第三步：写图片点击坐标，发送校验。

理想很美满，现实很骨干！

第一个bug，vccodestring格式你根本看不懂。

据说这个是 UTF-8 格式，可以直接使用哦。❌

这明明是个什么都看不懂的乱码呀，经测试在页面中是无法使用的。

***在此给前端程序猿们一个建议，在你看不懂的格式内容时，请先去”验证“后端返回格式是否正确！

这里我直接用各种设置，都尝试无法正常显示中文，先是使用过requestContent-Type

'Content-Type':'application/json;charset=utf-8'

【原因】：后端返回 utf-8 格式中文，在返回过程中，中文不能有效识别，形成乱码。

【解决方法】：在后端，先做一层转码，使用的是 codeURL。

第二个bug，返回图片格式在页面上不能正常显示。

Data 数据信息显示：

这个目前还未确定是什么格式，如有知道者，请告知我。学习了！

经过仔细查看文章和资料，确定了使用 【Blob】格式。

你可以把内容直接通过 var blob = new Blob() ; blob = this.response；但可以告诉你个事，ajax 不支持 返回格式是 Blob。

所以，这里只好使用原生XMLHttpRequest，通过newXMLHttpRequest()实例话构造函数。

附上源码：

看到这里使用到 【readAsDataURL】方法和 【onLoad】事件。

readAsDataURL： 【官方】开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data:URL格式的字符串以表示所读取文件的内容。

onLoad：【官方】处理load事件。该事件在读取操作完成时触发。

onLoad 内做创建图片并使用 reader.result（初始值：null） 的链接数据，result 数据显示是字符串：data:image/png;base64,****。

当然还可以用另一种方式【URL.createObjectURL】：【源码】

第三个bug，这两种方法都遇到兼容问题！

【readAsDataURL】

【URL.createObjectURL】

所以，在项目中遇到兼容 IE10 以下的版本时，只好做 base64 图片显示啦～

附上IE版本代码：

附：博客和网站

1、URL.createObjectURL

2、readAsDataURL

3、ajax 请求二进制流 图片 文件 XMLHttpRequest 请求并处理二进制流数据 之最佳实践

End

谢谢观看，欢迎交流