前端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可以获取当前文件上传信息，如下图:

一般会用于获取上传百分比。

码字不易，希望大佬指点！