【JS】前端文件读取FileReader操作总结

前言：开发中经常遇到文件上传的场景，有时需要前端将文件内容读取出来再以base64格式传到接口。

目录

• FileReader
• • 主要方法
  • • readAsArrayBuffer(blob)
    • readAsText(blob, [encoding])
    • readAsDataURL(blob)
    • 主要事件
    • React + antd Upload 组件示例

      FileReader

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

      构造函数：

      let reader = new FileReader(); // 没有参数

      主要方法

      readAsArrayBuffer(blob)

      将数据读取为二进制格式的 ArrayBuffer。当读取操作完成时，readyState 变成 DONE（已完成），并触发 loadend 事件，同时 result 属性中将包含一个 ArrayBuffer 对象以表示所读取文件的数据。

      reader.readAsArrayBuffer(blob)

      readAsText(blob, [encoding])

      将数据读取为给定编码（默认为 utf-8 编码）的文本字符串。

      instanceOfFileReader.readAsText(blob[, encoding]);

      readAsDataURL(blob)

      读取二进制数据，并将其编码为 base64 的 data url。

      reader.readAsDataURL(blob);

      读取方法都是异步的，也就是说只有当执行完成后才能够查看到结果，如果直接查看是无结果的，并返回 undefined。必须要挂载 实例下的 onload 或 onloadend 的方法才能处理转化后的结果

      FileReader的三个属性：

      1. error: 返回读取时的错误信息
      2. readyState: 返回操作的当前状态
      3. result: 返回读取文件的结果

      读取文件的示例：

      参考 https://blog.csdn.net/qq_60440599/article/details/136071142

      function readFile(input) {  let file = input.files[0];  let fileReader= new FileReader();  fileReader.readAsText(file);  // 或者 fileReader.readAsArrayBuffer(file)    /**   * 该方法在读取时调用   */  fileReader.onloadstart = () => {      console.log("开始读取")      console.log(fileReader.readyState)//调用函数,但还没有结束,返回1  }  /**   * 该方法在读取成功时调用   */  fileReader.onload = () => {      console.log("读取成功")      console.log(fileReader.result)      console.log(fileReader.readyState)//调用完成,返回2  }  /**   * 该方法在读取结束时调用   */  fileReader.onloadend = () => {      console.log("读取结束")  }  /**   * 读取过程中触发   */  fileReader.onprogress = (e) => {      console.log("读取中")      //获取已经加载的数据量      console.log("loaded==>" + e.loaded)  }  /**   * 该方法在调用abort函数时触发   */  fileReader.onabort = () => {      console.log("操作终止")  }  //当读取出现失败时触发  fileReader.onerror = () => {      console.log("出现错误")      console.log(fileReader.error)  }}

      ---

      read 方法的选择tips：

      • readAsArrayBuffer —— 用于二进制文件，执行低级别的二进制操作。对于诸如切片（slicing）之类的高级别的操作，File 是继承自 Blob 的，所以可以直接调用它们，而无需读取。
      • readAsText —— 用于文本文件，当我们想要获取字符串时。
      • readAsDataURL —— 用于在 src 中使用此数据，并将其用于img 或其他标签时。

        还有一种用于此的读取文件的替代方案：URL.createObjectURL(file)。

        示例：根据用户传入的图片文件,来生成一个对应的临时url,并将临时url作为src传给img标签

        let file = document.getElementById("file")let img= document.getElementById("img")file.addEventListener("change", (e) => {    let fileList=e.target.files    //先获取一份文件    //这里获取的才是File对象    let file = fileList[0]    //因为file也是Blob对象,所以直接传入即可    img.src=URL.createObjectURL(file)})

        主要事件

        读取过程中，有以下事件：

        • loadstart —— 开始加载。
        • progress —— 在读取过程中出现，当FileReader读取数据时，进度事件会定期触发。
        • load —— 读取完成时触发，没有 error。
        • abort —— 在中止读取时会触发 abort 事件：例如程序调用 abort()。。
        • error —— 出现 error时触发。
        • loadend —— 读取完成，无论成功还是失败。

          读取完成后，可以通过以下方式访问读取结果：

          • reader.result 是结果（如果成功）
          • reader.error 是 error（如果失败）。

            检测浏览器对 FileReader 的支持：

            if(window.FileReader) {  var fr = new FileReader();  // add your code here}else {  alert("Not supported by your browser!");}

            React + antd Upload 组件示例

            场景： 表单文件上传，读取后以base64格式与表单一起传给后端。

            1}  accept=".jpg,.jpeg,.png"  beforeUpload={(file) = {    console.log('文件类型', file.type, file);    // 限制文件类型    const allowTypes = [      'image/png',      'image/jpeg',      'image/jpg',    ];    const isAllowType = allowTypes.includes(file.type);// 校验文件大小和类型    if (!isAllowType || file.size / 1024 / 1024 > 4) {      message.error('文件格式大小错误');      return Upload.LIST_IGNORE;    }    const reader = new FileReader();    //将上传的文件读取成base64    reader.readAsDataURL(file);    reader.onloadend = function () {    console.log('文件Base64内容',reader.result, file);    };    // 阻止上传，为了最后和表单一起提交    return false;  }}>      文件上传