前端二进制处理详解：Blob、ArrayBuffer与Node.js Buffer

作者：接口漫谈时间：2026-10-24 10:48:10浏览：351

本文深入解析JavaScript中的二进制家族，涵盖Blob、ArrayBuffer及Node.js Buffer的核心概念与差异。详细演示Blob在文件下载、图片显示及分片上传中的应用，讲解ArrayBuffer与DataView对二进制数据的精细操作，并介绍Node.js中Buffer处理I/O数据的方法，帮助开发者高效处理前端与后端的二进制数据交互。

概述

Blob：前端专门用于支持文件操作的二进制对象。

ArrayBuffer：前端通用的二进制缓冲区，外观类似数组，但在API和特性上存在显著差异。

Buffer：由Node.js提供的二进制缓冲区，通常用于处理I/O操作。

Blob

首先介绍Blob，它是用于支持文件操作的对象。简单来说，JavaScript中有File和Blob两个构造函数，其中File继承了Blob的所有属性。

因此，我们可以将File对象视为一种特殊的Blob对象。

在前端开发中，我们通常在哪些场景下获取File对象？请参考以下示例：

（备注：目前File API规范仍处于Working Draft状态）

既然File对象是特殊的Blob对象，它自然可以直接调用Blob的方法。接下来我们将查看Blob的具体方法及其实现的功能。

Blob实战

利用window.URL.createObjectURL方法，可以将Blob转换为Blob URL，并用作文件下载或图片显示的链接。

通过Blob URL实现的下载或显示功能仅限于单个浏览器内部，无法在服务器端存储，或者说在服务器端存储Blob URL没有实际意义。

以下是一个Blob URL的示例，其长度非常短：

blob:d3958f5c-0777-0845-9dcf-2cb28783acaf

与冗长的Base64格式Data URL相比，Blob URL显然无法存储足够信息，这表明它仅类似于浏览器内部的“引用”。从这一角度看，Blob URL是浏览器自行制定的一种伪协议。

Blob下载文件

我们可以通过window.URL.createObjectURL接收一个Blob（或File）对象，将其转换为Blob URL，然后赋值给a.download属性。点击页面上的该链接即可实现文件下载。


<!-- html部分 -->
<a id="h">点此进行下载</a>
<!-- js部分 -->
<script>
  var blob = new Blob(["Hello World"]);
  var url = window.URL.createObjectURL(blob);
  var a = document.getElementById("h");
  a.download = "helloworld.txt";
  a.href = url;
</script>

备注：download属性不兼容IE浏览器。对于IE10/11，可通过window.navigator.msSaveBlob方法或其他方案进行优化。

运行结果

Blob图片本地显示

由window.URL.createObjectURL生成的Blob URL还可以赋值给img.src，从而实现图片的本地显示。


<!-- html部分 -->
<input type="file" id='f' />
<img id='img' style="width: 200px;height:200px;" />
<!-- js部分 -->
<script>
  document.getElementById('f').addEventListener('change', function (e) {
    var file = this.files[0];
    const img = document.getElementById('img');
    const url = window.URL.createObjectURL(file);
    img.src = url;
    img.onload = function () {
        // 释放一个之前通过调用 URL.createObjectURL创建的 URL 对象
        window.URL.revokeObjectURL(url);
    }
  }, false);
</script>

运行结果

Blob文件分片上传

通过Blob.slice(start, end)可以将大型Blob分割为多个小型Blob。
xhr.send可以直接发送Blob对象。

前端


<!-- html部分 -->
<input type="file" id='f' />
<!-- js部分 -->
<script>
  function upload(blob) {
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/ajax', true);
    xhr.setRequestHeader('Content-Type', 'text/plain')
    xhr.send(blob);
  }
  document.getElementById('f').addEventListener('change', function (e) {
    var blob = this.files[0];
    const CHUNK_SIZE = 20; .
    const SIZE = blob.size;
    var start = 0;
    var end = CHUNK_SIZE;
    while (start < SIZE) {
        upload(blob.slice(start, end));
        start = end;
        end = start + CHUNK_SIZE;
    }
  }, false);
</script>

Node端


app.use(async (ctx, next) => {
    await next();
    if (ctx.path === '/ajax') {
        const req = ctx.req;
        const body = await parse(req);
        ctx.status = 200;
        console.log(body);
        console.log('---------------');
    }
});

文件内容

According to the Zhanjiang commerce bureau, the actual amount of foreign capital utilized in Zhanjiang from January to October this year was

运行结果

本地读取文件内容

若要读取Blob或文件对象并转换为其他格式数据，可借助FileReader对象的API进行操作。

FileReader.readAsText(Blob)：将Blob转换为文本字符串。
FileReader.readAsArrayBuffer(Blob)：将Blob转换为ArrayBuffer格式数据。
FileReader.readAsDataURL()：将Blob转换为Base64格式的Data URL。

接下来我们尝试以字符串方式读取文件内容。


<input type="file" id='f' />


document.getElementById('f').addEventListener('change', function (e) {
    var file = this.files[0];
    const reader = new FileReader();
    reader.onload = function () {
        const content = reader.result;
        console.log(content);
    }
    reader.readAsText(file);
}, false);

运行结果

上述介绍了Blob的用法。不难发现，Blob主要针对文件操作，可视作文件对象。同时，Blob缺乏对二进制数据的细粒度操作能力，例如修改特定部分的二进制数据时，Blob显得力不从心。这种细粒度功能可由下文介绍的ArrayBuffer实现。

ArrayBuffer

通过下图了解ArrayBuffer的大致功能。

需说明的是，ArrayBuffer与JavaScript原生数组有显著区别，如图所示。

接下来逐一进行细节介绍。

通过ArrayBuffer格式读取本地数据


document.getElementById('f').addEventListener('change', function (e) {
  const file = this.files[0];
  const fileReader = new FileReader();
  fileReader.onload = function () {
    const result = fileReader.result;
    console.log(result)
  }
  fileReader.readAsArrayBuffer(file);
}, false);

运行结果

通过ArrayBuffer格式读取Ajax请求数据

通过设置xhr.responseType = "arraybuffer"来指定响应的数据类型。

在onload回调中打印xhr.response。

前端


const xhr = new XMLHttpRequest();
xhr.open("GET", "ajax", true);
xhr.responseType = "arraybuffer";
xhr.onload = function () {
    console.log(xhr.response)
}
xhr.send();

Node端


const app = new Koa();
app.use(async (ctx) => {
  if (pathname = '/ajax') {
        ctx.body = 'hello world';
        ctx.status = 200;
   }
}).listen(3000)

运行结果

通过TypeArray对ArrayBuffer进行写操作


const typedArray1 = new Int8Array(8);
typedArray1[0] = 32;

const typedArray2 = new Int8Array(typedArray1);
typedArray2[1] = 42;
 
console.log(typedArray1);
//  output: Int8Array [32, 0, 0, 0, 0, 0, 0, 0]
 
console.log(typedArray2);
//  output: Int8Array [32, 42, 0, 0, 0, 0, 0, 0]

通过DataView对ArrayBuffer进行写操作


const buffer = new ArrayBuffer(16);
const view = new DataView(buffer);
view.setInt8(2, 42);
console.log(view.getInt8(2));
// 输出: 42

Buffer

Buffer是Node.js提供的对象，前端环境不存在。它通常应用于I/O操作，例如接收前端请求数据时，可通过以下Buffer API对接收到的前端数据进行整合。

Buffer实战

示例如下：

Node端（Koa）


const app = new Koa();
app.use(async (ctx, next) => {
    if (ctx.path === '/ajax') {
        const chunks = [];
        const req = ctx.req;
        req.on('data', buf => {
            chunks.push(buf);
        })
        req.on('end', () => {
            let buffer = Buffer.concat(chunks);
            console.log(buffer.toString())
        })
    }
});
app.listen(3000)

前端


const xhr = new XMLHttpRequest();
xhr.open("POST", "ajax", true);
xhr.setRequestHeader('Content-Type', 'text/plain')
xhr.send("asdasdsadfsdfsadasdas");

运行结果

Node端输出

asdasdsadfsdfsadasdas

以上就是关于JS二进制家族的详细内容，更多相关JS二进制家族的资料请持续关注本站其他文章！

作者最新文章

全栈开发中JavaScript与Java怎么协作？前后端技术栈配合解析

2026-11-04 11:08:24

Node.js官网访问慢？国内镜像加速下载方案

2026-11-03 18:57:24

Node.js 连接 MySQL 数据库实现增删改查操作

2026-11-03 14:31:14

Windows系统安装Node.js：下载、配置与环境验证

2026-11-03 14:15:56

Linux (Ubuntu/CentOS) 环境下安装Node.js的常用方法

2026-11-03 10:18:39