关于 FileReader

FileReader

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

属性

属性	说明	返回值
readyState	提供 FileReader 读取操作时的当前状态。	Number。0：还没有加载任何数据；1：数据正在被加载；2：已完成全部的读取请求
result	返回文件的内容。只有在读取操作完成后，此属性才有效	一个字符串或者一个ArrayBuffer（取决于使用哪种读取方法）
error	返回读取文件时的错误信息	DOMError

事件处理

事件	说明
onloadstart	读取操作开始时触发
onprogress	读取时触发
onload	读取操作完成时触发
onloadend	在读取操作结束时触发（可能是成功，可能是失败）
onabort	读取操作被中断时触发
onerror	读取操作发生错误时触发

结合事件处理函数，看看各阶段的 readyState ：

 <input id="test" type="file" onchange="getFile" />

function getFile(){
    
    
   const file = document.querySelector('#test').files[0];
   const reader = new FileReader();
   console.log("readyState = ", reader.readyState)
   reader.onloadstart = ()=>{
    
     console.log("onloadstart readyState = ", reader.readyState) }
   reader.onprogress = ()=>{
    
     console.log("onprogress readyState = ", reader.readyState) }
   reader.onload = ()=>{
    
     console.log("onload readyState = ", reader.readyState) }
   reader.onloadend = ()=>{
    
     console.log("onloadend readyState = ", reader.readyState) }
   reader.readAsDataURL(file);
}

输出结果：

方法

方法	说明
abort	取消 FileReader 的读取操作，触发之后 readyState 为已完成（DONE）
readAsArrayBuffer	将 Blob 或 File 读取为 ArrayBuffer 对象
readAsBinaryString	将 Blob 或 File 读取为文件原始二进制格式
readAsDataURL	将 Blob 或 File 读取为 data:URL格式的字符串（base64编码）
readAsText	将 Blob 或 File 读取为内容(字符串形式)

readAsArrayBuffer、readAsBinaryString、readAsDataURL、readAsText 这四个方法都是：

• 接收 Blob 或 File 对象
• 读取完成时，readyState 变成 DONE（已完成）
• 触发 loadend 事件
• 读取结果在 result 属性中

这四个方法的读取结果都长啥样啊？我分别准备了一个 test.txt（放了些假文） 和 一个 test.png 进行测试，输出结果如下：

readAsArrayBuffer

readAsBinaryString

readAsDataURL

readAsText

测试代码：

<!-- Vue -->
<template>
  <div id="fileUpload">
    <h1>测试方法: {
   
   {readType}}</h1>
    <h4>
      读取txt文件：
      <input id="txt" type="file" @change="getFile('txt')" />
    </h4>
    <h4>
      读取jpg文件：
      <input id="jpg" type="file" @change="getFile('jpg')" />
    </h4>
    <div style="margin-top:20px;">
      <button style="margin:5px;" @click="setReadType('readAsArrayBuffer')" > readAsArrayBuffer </button> 
      <button style="margin:5px;" @click="setReadType('readAsBinaryString')" > readAsBinaryString </button> 
      <button style="margin:5px;" @click="setReadType('readAsDataURL')" > readAsDataURL </button> 
      <button style="margin:5px;" @click="setReadType('readAsText')" > readAsText </button> 
    </div>
  </div>
</template>

<script>
export default {
     
     
  name: "fileUpload",
  data() {
     
     
    return {
     
     
      readType:'readAsArrayBuffer'
    };
  },
  methods: {
     
     
    setReadType(type){
     
     
      this.readType = type;
      document.querySelector('#txt').value = '';
      document.querySelector('#jpg').value = '';
    },
    getFile(type){
     
     
      const file = document.querySelector(`#${
       
       type}`).files[0];
      const reader = new FileReader();
      reader.onload = ()=>{
     
     
        console.log(`读取.${
       
       type} 结果如下：`,reader.result);
        this[`${
       
       type}Res`] = reader.result;
      }
      reader[this.readType](file);
    }
  }
};
</script>

参考链接：
MDN：https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader