FileReader
只能在浏览器环境使用 FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。
创建对象
/**
{
error: null
onabort: null
onerror: null
onload: null
onloadend: null
onloadstart: null
onprogress: null
readyState: 0
result: null
}
*/
var reader = new FileReader();
console.log(reader)
实例属性
error readyState result
console.log(reader.error); //null
console.log(reader.readyState); //0 reader 已经创建。还没有调用任何方法。 1读取的方法已经被调用 2完成操作
console.log(reader.result); //null 返回文件的内容。只有在读取操作完成后，此属性才有效，返回的数据的格式取决于是使用哪种读取方法来执行读取操作的。
实例方法
abort()
该方法可以取消 FileReader 的读取操作，触发之后 readyState 为已完成（DONE）。 注意 对一个没有正在进行读取操作（readyState 不是 LOADING）的 FileReader 进行 abort 操作，会抛出 DOM_FILE_ABORT_ERR 错误。
readAsArrayBuffer(Blob)
方法用于启动读取指定的 Blob 或 File 内容。当读取操作完成时，readyState 变成 2 DONE（已完成），并触发 loadend 事件，同时 result 属性中将包含一个 ArrayBuffer 对象以表示所读取文件的数据。
readAsDataURL(Blob)
方法用于启动读取指定的 Blob 或 File 内容。当读取操作完成时，readyState 变成 2 DONE（已完成），并触发 loadend 事件，同时同时 result 属性将包含一个data:URL 格式的字符串（base64 编码）以表示所读取文件的内容。
readAsText(Blob,Encoding)
可以将 Blob 或者 File 对象转根据特殊的编码格式转化为内容 (字符串形式);异步方法
事件
abort 取消时执行 error 出错执行 load 加载 loadend 加载完毕 loadstart 开始加载 progress 加载进度
/**
{
error: null
onabort: null
onerror: null
onload: null
onloadend: null
onloadstart: null
onprogress: null
readyState: 0
result: null
}
*/
var reader = new FileReader();
console.log(reader.error); //null
console.log(reader.readyState); //0 EMPTY reader 已经创建。还没有调用任何方法。 1 LOADING读取的方法已经被调用 2 DONE完成操作
console.log(reader.result); //null 返回文件的内容。只有在读取操作完成后，此属性才有效，返回的数据的格式取决于是使用哪种读取方法来执行读取操作的。
const blob = new Blob(['asdf'], { type: 'text/plain' })
console.log(blob);
reader.addEventListener('abort', onloadend);
reader.addEventListener('error', onloadend);
reader.addEventListener('load', onloadend);
reader.addEventListener('loadend', onloadend);
reader.addEventListener('loadstart', onloadend);
reader.addEventListener('progress', onloadend);
function onloadend(event) {
console.log("事件"+event.type);
console.log("当前进度"+event.loaded);
console.log(event.target.result);
console.log("总量"+event.total);
};
reader.readAsArrayBuffer(blob)//ArrayBuffer
reader.readAsDataURL(blob) //data:text/plain;base64,YXNkZg==
reader.readAsText(blob) //asdf
console.log(reader.readyState);
FileReaderSync
以同步的方式读取File或Blob对象中的内容。 过大会阻塞页面
URL.createObjectURL(blob|File|MediaSource) ：DOMString
静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的 URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的 URL 对象表示指定的 File 对象或 Blob 对象。
URL.revokeObjectURL(objectURL);
释放一个之前已经存在的、通过调用 URL.createObjectURL() 创建的 URL 对象。当你结束使用某个 URL 对象之后，应该通过调用这个方法来让浏览器知道不用在内存中继续保留对这个文件的引用了。
开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 5天，点击查看活动详情
