人迹罕至的FileReader

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

这边文章主要分4 部分介绍FileReader。

FileReader方法；
FileReader事件；
代码操作；
开发实例（重点阅读，可快速应用于项目中）。

FileReader方法：

首先创建一个FileReader实例：

const reader = new FileReader();

readAsArrayBuffer(file)

按字节读取文件内容，结果用ArrayBuffer对象表示

readAsBinaryString(file)

按字节读取文件内容，结果为文件的二进制串

readAsDataURL(file)

读取文件内容，结果用data:url的字符串形式表示，将文件内容进行base64编码后输出

readAsText(file,encoding)

按字符读取文件内容，结果用字符串形式表示

abort()

终止文件读取操作

FileReader事件：

onloadstart 当读取操作开始时调用

onprogress 在读取数据过程中周期性调用

onabort 当读取操作被中止时调用

onerror 当读取操作发生错误时调用

onload 当读取操作成功完成时调用

onloadend 当读取操作完成时调用，无论成功，失败或取消

每过50ms左右，就会触发一次progress事件，对于较大的文件可以利用progress实现进度条；

由于种种原因无法读取文件时，会触发error事件。触发error事件时，相关信息保存在FileReader对象的error属性中，这个属性将保存一个对象，此对象只有一个属性code，即错误码。1表示未找到文件，2表示安全性错误，3表示读取中断，4表示文件不可读，5表示编码错误。

代码操作

function imgChange(e){
   
    if (e.files.length != 0) {
   
      var reader = new FileReader();
      if (!reader) {
   
        e.value = '';
        return;
      };

      reader.onload = function(ev) {
   
        var result = ev.target.result; // 图片base64
      };

      reader.readAsDataURL(file);
    }
  }

开发实例

FileReader大多用于图片上传处理，处理图片转译base64，转译完成后进行其他的处理。

详见图片转base64、判断图片大小、图片压缩、图片上传。