请问怎样理解浏览器端和 Nodejs 环境里的各种 Binary 和 Buffer 的数据类型?

请问怎样理解浏览器端和 Nodejs 环境里的各种 Binary 和 Buffer 的数据类型?

刚开始是想从 Socket.IO 上传文件意外看懂了 base64 上传的方案 关于 Base64 在百度百科上说了, 所以也能懂这个意思 之后看 API 还是有很多格式的样子, FileReader 文档里写的 浏览器端还有 readAsArrayBuffer readAsBinaryString readAsText 几个 前两个只能理解是二进制的文件, 不过这样读了, 服务端应该怎样去用? 在 Node 关于 Buffer 的 API 看有相当多个 API… 不明白… 1, 这么多 API 意义是什么? 2, 怎么和浏览器端的数据格式进行对应呢?


6 回复

理解浏览器端和Node.js环境中的Binary和Buffer数据类型是掌握网络通信和文件处理的基础。我们将通过一些具体的例子来说明这些概念。

浏览器端

在浏览器中，处理二进制数据的主要方式是使用FileReader对象，它提供了几种不同的方法来读取文件：

  • readAsArrayBuffer：将文件或 Blob 对象读取为ArrayBuffer。
  • readAsBinaryString：将文件或 Blob 对象读取为二进制字符串。
  • readAsText：将文件或 Blob 对象读取为文本字符串。

示例代码

const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function(event) {
    const file = event.target.files[0];
    
    // 使用 FileReader 读取文件
    const reader = new FileReader();
    reader.onload = function(e) {
        // e.target.result 是读取结果
        console.log('读取结果:', e.target.result);
    };
    
    // 读取为 ArrayBuffer
    reader.readAsArrayBuffer(file);
});

Node.js 端

在Node.js环境中，处理二进制数据主要依赖于Buffer对象。Buffer是一个用于处理二进制数据的类，它提供了许多API来创建、操作和转换二进制数据。

示例代码

const fs = require('fs');

// 读取文件为 Buffer
fs.readFile('example.bin', (err, data) => {
    if (err) throw err;
    console.log('Buffer 数据:', data);
});

// 创建一个 Buffer
const bufferData = Buffer.from([0x48, 0x65, 0x6c, 0x6c, 0x6f]);
console.log('新创建的 Buffer:', bufferData.toString()); // 输出 "Hello"

对应关系

  • 浏览器中的 readAsArrayBuffer 对应于 Node.js中的 Buffer.from(array) 或 new Buffer(array)。
  • 浏览器中的 readAsBinaryString 通常可以使用 Node.js中的 Buffer.from(string, 'binary')，但需要注意的是，readAsBinaryString返回的是一个二进制字符串，而不是标准的字符串。

总结

理解这些API的意义在于能够灵活地在不同环境中处理二进制数据。浏览器中的FileReader和Node.js中的Buffer提供了强大的工具来读取、写入和操作二进制数据，这对于实现诸如文件上传、下载以及网络通信等功能至关重要。


在 StackOverflow 找到了 ArrayBuffer 和 Buffer 对转的代码, 好神奇的样子

function toArrayBuffer(buffer) {
    var ab = new ArrayBuffer(buffer.length);
    var view = new Uint8Array(ab);
    for (var i = 0; i < buffer.length; ++i) {
        view[i] = buffer[i];
    }
    return ab;
}

From ArrayBuffer to Buffer:

function toBuffer(ab) {
    var buffer = new Buffer(ab.byteLength);
    var view = new Uint8Array(ab);
    for (var i = 0; i < buffer.length; ++i) {
        buffer[i] = view[i];
    }
    return buffer;
}

不用这样麻烦吧，socket.io 传附件 客户端：fileReader.readAsBinaryString(newFile); 服务器端： var buffer = new Buffer(fileInfo[fileName][‘data’], ‘binary’); gs.write(buffer, function(err, f){ gs.close(function(err, f){ eventHandler.trigger(‘eUploadAttachmentEnd’） }) }); 我这样存放到gridfs没有问题

ArrayBuffer 和 BinaryString 区别是不是不大的?

还有上传进度你有做过么? 想了一下们什么思路的感觉

在浏览器端和Node.js环境中，处理二进制数据的方式有所不同，但两者可以相互转换。理解这些差异有助于更好地处理文件传输、网络通信等场景。

浏览器端

浏览器提供了一些API来处理二进制数据：

  1. ArrayBuffer: 一个固定长度的二进制数据缓冲区。
  2. Blob: 代表一个不可变的、原始数据的类文件对象。
  3. File: 是Blob的一个特殊类型，用于表示用户文件系统上的文件。
  4. TypedArray: 包括Int8Array, Uint8Array等，提供了对ArrayBuffer的视图。
  5. DataView: 提供了一个低级接口来访问ArrayBuffer中的数据。

示例代码:

let arrayBuffer = new ArrayBuffer(8);
let uint8Array = new Uint8Array(arrayBuffer);
uint8Array[0] = 1;
console.log(uint8Array); // [1, 0, 0, 0, 0, 0, 0, 0]

Node.js环境

Node.js通过Buffer类处理二进制数据。Buffer是固定长度的二进制数据块，它与Array类似，但能更高效地处理二进制数据。

示例代码:

const buffer = Buffer.alloc(8);
buffer.writeUInt8(1, 0); // 在偏移量为0的位置写入1
console.log(buffer); // <Buffer 01 00 00 00 00 00 00 00>

对应关系

  • ArrayBuffer 和 Uint8Array 可以直接映射到 Buffer。
  • Base64 编码是一种常见的文本表示方法，可以在浏览器端使用btoa或Buffer.from在Node.js中解码和编码。

示例代码:

// 浏览器端
let binaryString = "Hello World";
let base64String = btoa(binaryString);

// Node.js
let buffer = Buffer.from("Hello World", 'utf8');
let base64String = buffer.toString('base64'); // aGVsbG8gd29ybGQ=

通过这些示例代码，你可以看到如何在浏览器端和Node.js环境中处理和转换二进制数据。

回到顶部