关于前端:你不常用的-FileReader-能干什么

48次阅读

共计 6009 个字符，预计需要花费 16 分钟才能阅读完成。

前言

欢送关注同名公众号《熊的猫》，文章会同步更新，也可疾速退出前端交换群！

本文灵感源于上周小伙伴遇到一个问题：

“一个本该返回 Blob 类型的下载接口，却返回了 JSon 类型的内容！！！“

这会有什么问题呢？

按原逻辑就是调用该接口后，就会一股脑把该接口接返回过去的内容，间接通过 Blob 对象 转换后再通过暗藏的 <a> 标签实现下载。

然而有一个问题，那就是接口也是须要进行各种逻辑解决、判断等等，而后再决定是给前端响应一个失常的 Blob 格局的文件流，还是返回相应 JSon 格局的异样信息 等等。

如果返回了 JSon 格局的异样信息，那前端应该给用户展现信息内容，而不是将其作为下载的内容！

FileReader 实现 Blob 从 String 到 JSON

复现问题

为了更直观看到对应的成果，咱们这里来简略模仿一下前后端的交互过程吧！

前端

因为小伙伴发送申请时应用的是 Axios，并且设置了其对应的 responsetype：blob | arraybuffer，所以这里咱们也应用 Axios 即可，具体如下：

    // 发动申请
    const request = () => {
      axios({
        method: 'get',
        url: 'http://127.0.0.1:3000',
        responseType: 'arraybuffer'
      })
        .then((res) => {

          // 转换为 bloc 对象
          const blob = new Blob([res.data])

          // 获取导出文件名,decodeURIComponent 为中文解码办法
          const fileName = decodeURIComponent(res.headers["content-disposition"].split("filename=")[1])

          // 通过 a 标签进行下载
          let downloadElement = document.createElement('a');
          let href = window.URL.createObjectURL(blob);
          downloadElement.href = href;
          downloadElement.download = fileName;
          document.body.appendChild(downloadElement);
          downloadElement.click();
          document.body.removeChild(downloadElement);
          window.URL.revokeObjectURL(href);
        });
    }

后端

这里咱们就简略通过 koa 来实现将一个表格文件响应给前端，具体如下：

    const xlsx = require("node-xlsx");

    const Koa = require("koa");
    const app = new Koa();

    const cors = require("koa2-cors");

    // 解决跨域
    app.use(
      cors({
        origin: "*", // 容许来自指定域名申请
        maxAge: 5, // 本次预检申请的有效期，单位为秒
        methods: ["GET", "POST"], // 所容许的 HTTP 申请办法
        credentials: true, // 是否容许发送 Cookie
      })
    );

    // 响应
    app.use(async (ctx) => {
      // 文件名字
      const filename = "人员信息";

      // 数据
      const data = [{ name: "赵", age: 16},
        {name: "钱", age: 20},
        {name: "孙", age: 17},
        {name: "李", age: 19},
        {name: "吴", age: 18},
      ];

      // 表格款式
      const oprions = {"!cols": [{ wch: 24}, {wch: 20}, {wch: 100}, {wch: 20}, {wch: 10}],
      };

      // JSON -> Buffer
      const buffer = JSONToBuffer(data, oprions);

      // 设置 content-type
      ctx.set("Content-Type", "application/vnd.openxmlformats");

      // 设置文件名，中文必须用 encodeURIComponent 包裹，否则会报异样
      ctx.set(
        "Content-Disposition",
        "attachment; filename=" + encodeURIComponent(filename) + ".xlsx"
      );

      // 文件必须设置该申请头，否则前端拿不到 Content-Disposition 响应头信息
      ctx.set("Access-Control-Expose-Headers", "Content-Disposition");

      // 将 buffer 返回给前端
      ctx.body = buffer;
    });

    // 将数据转成 Buffer
    const JSONToBuffer = (data, options = {}) => {
      let xlsxObj = [
        {
          name: "sheet",
          data: [],},
      ];

      data.forEach((item, idx) => {
        // 解决 excel 表头
        if (idx === 0) {xlsxObj[0].data.push(Object.keys(item));
        }

        // 解决其余 excel 数据
        xlsxObj[0].data.push(Object.values(item));
      });

      // 返回 buffer 对象
      return xlsx.build(xlsxObj, options);
    };
    
    // 启动服务
    app.listen(3000);

失常成果展现

异样成果展现

能够看到当返回的内容为 JSON 格局 的内容时，本来逻辑在获取 filename 处就产生异样了，即便这一块没有产生异样，被失常下载下来也是不对的，因为这种状况应该要进行提醒。

并且此时间接去拜访 res.data 失去的也不是一个 JSON 格局 的内容，而是一个 ArrayBuffer。

返回的明明是 JSON，然而拿到的却是 ArrayBuffer？

responseType 惹的祸

还记得咱们在通过 Axios 去发动申请时设置的 responseType：'arraybuffer' 吗？

没错，就是因为这个配置的问题，它会把失去的后果给转成设置的类型，所以看起是一个 JSON 数据，但实际上拿到的是 Arraybuffer。

这个 responseType 实际上就是 XMLHttpRequest.responseType，可点击该链接自行查看。

不设置 responseType 行不行？

那么既然是这个配置的问题，那么咱们不设置不就好了！

的确可行，如下是未设置 responseType 获取到的后果：

但也不行 ，如果不设置 responseType 或者设置的类型不对，那么在 失常状况 下（即 文件被下载 ）时 会导致文件格式被损坏，无奈失常关上，如下：

FileReader 来救场

实际上还有个比拟间接的解决方案，那就是把接管到的 Arraybuffer 转成 JSON 格局不就行了吗？

没错，咱们只须要通过 FileReader 来实现这一步即可，请看如下示例：

// json -> blob
const obj = {hello: "world"};

const blob = new Blob([JSON.stringify(obj, null, 2)], {type: "application/json",});

console.log(blob) // Blob {size: 22, type: 'application/json'}

// blob -> json
const reader = new FileReader()

reader.onload = () => {console.log(JSON.parse(reader.result)) // {hello: "world"}
}

reader.readAsText(blob,  'utf-8')

是不是很简略啊！

值得注意的是，并不是任何时候都须要转成 JSON 数据，就像并不是任何时候都要下载一样，咱们须要判断什么时候该走下载逻辑，什么时候该走转换成 JSON 数据。

怎么判断以后是该下载？还是该转成 JSON？

这个还是比较简单的，换个说法就是判断以后返回的是不是文件流，上面列举较常见的两种形式。

依据 filename 判断

失常状况来讲，再返回文件流的同时会在 Content-Disposition 响应头中增加和 filename 相干的信息，换句话说，如果以后没有返回 filename 相干的内容，那么就能够将其当做异常情况，此时就应该走转 JSON 的逻辑。

不过须要留神，有时候后端返回的某些文件流并不会设置 filename 的值，此时尽管合乎异常情况，然而实际上返回的是一个失常的文件流，因而不太举荐这种形式。

依据 Content-Type 判断

这种形式更正当，毕竟后端无论是返回 文件流 或是 JSON 格局的内容，其响应头中对应的 Content-Type，必然不同，这里的判断更简略，咱们直接判断其是不是 JSON 类型即可。

更改后的代码，如下：

axios({
    method: 'get',
    url: 'http://127.0.0.1:3000',
    responseType: 'arraybuffer'
  })
    .then(({headers, data}) => {console.log("FileReader 解决前：", data)

      const IsJson = headers['content-type'].indexOf('application/json') > -1;

      if(IsJson){const reader = new FileReader()
        
        // readAsText 只接管 blob 类型，因而这里须要先将 arraybuffer 变成 blob
        // 若后端间接返回的就是 blob 类型，则间接应用即可
        reader.readAsText(new Blob([data], {type: 'application/json'}), 'utf-8')
        
        reader.onload = () => {
          // 将字符内容转为 JSON 格局
          console.log("FileReader 解决后：", JSON.parse(reader.result))
        }
        return
      }

      // 下载逻辑
      download(data)
    });

值得注意的是，readAsText 只接管 blob 类型，因而这里须要先将 arraybuffer 变成 blob，若后端间接返回的就是 blob 类型，则间接应用即可。

FileReader 还能干什么？

以上是应用 FileReader 解决一个理论问题的例子，那么除此之外它还有什么利用场景呢？

不过咱们还是先来理解一下 FileReader 的一些相干内容吧！！！

FileReader 是什么？

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

不过还要留神如下两条规定：

  • FileReader 仅用于以平安的形式从用户（近程）零碎读取文件内容，它不能用于从文件系统中按路径名简略地读取文件
  • 要在 JavaScript 中按路径名读取文件，应应用规范 Ajax 解决方案进行 服务器端文件读取

总结起来就是，FileReader 只能读取 File 和 Blob 类型的文件内容，并且不能间接按门路的形式读取文件，如果须要以门路形式读取，最好要通过 服务端 返回流的模式。

四种读取形式

FileReader 能够如下四种形式读取指标文件：

  • FileReader.readAsArrayBuffer()

    • 开始读取指定的 Blob中的内容，读取实现后，result 属性中保留的将是被读取文件的 ArrayBuffer 数据对象

  • FileReader.readAsBinaryString()（非标准）

    • 开始读取指定的 Blob 中的内容，读取实现后，result 属性中将蕴含所读取文件的 原始二进制数据

  • FileReader.readAsDataURL()

    • 开始读取指定的 Blob 中的内容，读取实现后，result 属性中将蕴含一个 data: URL 格局的 Base64 字符串以示意所读取文件的内容

  • FileReader.readAsText()

    • 开始读取指定的 Blob 中的内容，读取实现后，result 属性中将蕴含一个 字符串 以示意所读取的文件内容

如上对应的办法命名非常合乎顾名思义的特点，因而能够很容易看进去在不同场景下应该抉择什么办法，并且如上办法个别都会配合 FileReader.onload 事件 和 FileReader.result 属性 一起应用。

FileReader 的其余利用场景

预览本地文件

通常状况下，前端抉择了相应的本地文件（图片、音 / 视频 等）后，须要通过接口发送到服务端，接着服务端在返回一个相应的预览地址，前端在实现反对预览的操作。

如果说当初有一个须要省略掉两头过程的需要，那么你就能够通过 FileReader.readAsDataURL() 办法来实现，然而要思考文件大小带来转换工夫快慢的问题。

这一部分比较简单，就不贴代码占篇幅了，成果如下：

传输二进制格局数据

通常在上传文件时，前端间接将接管到的 File 对象以 FormData 发送给后端，但如果后端须要的是二进制的数据内容怎么办？

此时咱们就能够应用 FileReader.readAsArrayBuffer() 来配合，为啥不必 FileReader.readAsBinaryString()，因为它是非规范的，而且 ArrayBuffer 也是原始的 二进制数据。

具体代码如下：

// 文件变动
const fileChange = (e: any) => {const file = e.target.files[0]
  const reader = new FileReader()
  reader.readAsArrayBuffer(file)

  reader.onload = () => {upload(reader.result, 'http://xxx')
  }
}

// 上传
const upload = (binary, url) => {var xhr = new XMLHttpRequest();
  xhr.open("POST", url);
  xhr.overrideMimeType("application/octet-stream");

  // 间接发送二进制数据
  xhr.send(binary);

  // 监听变动
  xhr.onreadystatechange = function (e) {if (xhr.readyState === 4) {if (xhr.status === 200) {// 响应胜利}
    }
  }
}

最初

欢送关注同名公众号《熊的猫》，文章会同步更新，也可疾速退出前端交换群！

下面咱们通过 FileReader 解决了一个理论问题，同时也简略介绍了其相应的应用场景，但这个场景具体是否是用于你的需要还要具体分析，不能自觉应用。

以上就是本文的全部内容了，心愿本文对你有所帮忙！！！

正文完
前端
发表至： 前端
2023-07-10
 0
关于前端:服务器上搭建npm私有库
关于前端:java初学必看避免走入学习误区
关于前端:quasar-Icon-Genie-CLI-自动生成图标-安装使用过程
关于前端:Deploy-static-web-pages-for-free-with-4everland