arraybuffer的应用，下载图片/文件等

news2024/11/24 16:28:53

在这篇文章中，我们了解了js中arraybuffer是用来存储二进制缓存的，但是都是理论知识，本篇文章来介绍一个arraybuffer应用的场景。

主要应用场景是下载文件，在ajax请求中，设置responseType = 'arraybuffer' 得到一个二进制流，然后把得到的二进制流转换成我们想要的图片、文件、或者字符串等。

下面的例子是请求一个图片，得到图片的二进制流，然后把二进制流也就是arraybuffer 转化成 base64格式的图片，在页面中展示

1、服务端的代码如下，用于读取一个图片文件，并返回arraybuffer

const fs = require('fs');
const path = require('path');
const express = require('express');
const cors = require('cors');

const app = express();
app.use(cors());

app.get('/img', async (req, res) => {
  let result = '';
	// 读取png
  //const filePath = path.resolve(__dirname, 'word.png');
	// 读取svg
  const filePath = path.resolve(__dirname, 'icon.svg');
  if (fs.existsSync(filePath)) {
    result = fs.readFileSync(filePath);
  }
  res.end(result)
});

app.listen(3000, () => console.log('Running on port 3000'));

2、前端的请求如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./dist/bundle.js"></script>
    <style>
      .icon {
        width: 100px;
        height: 100px;
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <img id="icon" class="icon" src="" />
    <script>
      const xhr = new XMLHttpRequest();
      xhr.open('get', 'http://localhost:3000/img');
      // 这个arraybuffer需要都小写
      xhr.responseType = 'arraybuffer';
      xhr.onload = function (oEvent) {
        let arrayBuffer = xhr.response;
        if (arrayBuffer) {
            let byteArray = new Uint8Array(arrayBuffer)
            // 转化成base64编码的字符串
            const buffers = window.btoa(String.fromCharCode(...byteArray))
            // png 图片
			//const base64Img = `data:image/png;base64,${buffers}`
            // svg 图片
            const base64Img = `data:image/svg+xml;base64,${buffers}`
            // 展示到页面上
            document.getElementById('icon').src = base64Img
        } 
      };
      xhr.send();
    </script>
  </body>
</html>

最终效果如下