前端FileReader读取文件信息
FileReader
FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。
FileReader类型实现的是一种异步文件获取机制。
FileReader有一下几种方法
- FileReader.abort()
中止读取操作。在返回时，readyState属性为DONE。 - FileReader.readAsArrayBuffer()
开始读取指定的 Blob中的内容, 一旦完成, result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象. - FileReader.readAsBinaryString()
开始读取指定的Blob中的内容。一旦完成，result属性中将包含所读取文件的原始二进制数据。 - FileReader.readAsDataURL()
开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容。 - FileReader.readAsText()
开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个字符串以表示所读取的文件内容。
FileReader()返回一个新构造的FileReader。
想要创建一个FileReader对象,很简单,如下:
const reader = new FileReader();
事件处理
| 事件 | 发生时机 |
|---|---|
| FileReader.onabort | 处理abort，该事件在读取操作被中断时触发 |
| FileReader.onerror | 处理error，该事件在读取操作发生错误时触发。 |
| FileReader.onload | 该事件在读取操作完成时触发 |
| FileReader.onloadstart | 该事件在读取操作开始时触发 |
| FileReader.onloadend | 该事件在读取操作结束时（要么成功，要么失败）触发。 |
| FileReader.onprogress | 该事件在读取Blob时触发。 |
其中每过50ms左右，就会触发一次progress事件，可以获取和xhr的progress相同的参数：lengthComputable/loaded和total
由于种种原因无法读取文件会触发error事件
执行了error事件就不会执行load事件
读取文本及图片
通常我们通过input="file"来上传文件
<input type="file" onchange="onFile(event)" />
下图时文件file内容：
我们可以获取到文件名、修改时间、大小和文件类型等信息，文件内容也是包含在里面的，不过需要FileReader的读取文件方法才能获取，对于纯文本，我们使用readAsText方法，如下：
const content = document.getElementsByTagName("input");
const contentBox = document.getElementsByClassName("contents")[0]
let files,
type,
urlData,
html
function onFile(e) {
console.log(e);
files = e.target.files
console.log(files, files[0].type, 'files');
//FileReader读取文件内容
var reader = new FileReader();
if (/image/.test(files[0].type)) {
reader.readAsDataURL(files[0])
type = 'image'
} else {
reader.readAsText(files[0]);
type = 'text'
}
reader.onerror = function () {
console.log('error');
}
reader.onload = function (e) {
// urlData就是对应的文件内容
urlData = reader.result;
switch (type) {
case 'image':
html = `<img src = '${urlData}' / >`
break;
case 'text':
html = `<p>${urlData}</p>`
}
contentBox.innerHTML = html
};
}
读取图片
可以看到如果是图片，可以将图片文件转换为base64编码，然后哦展示出来
读取文本
可以看到如果是文本，则以字符串形式读取文本内容
onprogress
reader.onprogress = function(e){
if(e.lengthComputable){
progress = e.loaded / e.total
}
console.log(e, progress);
}
调用onprogress可以获取当前文件上传信息，如下图:
一般会用于获取上传百分比。
