一文彻底搞懂前端文件

1.前言

在前端开发中，Blob、ArrayBuffer、Buffer、File 和 Base64 都是处理二进制数据的不同方式，它们各自有不同的用途和特点。

2.基本介绍

2.1 Blob

Blob 是 Binary Large Object 的缩写，表示一个不可变的、原始数据的类文件对象。Blob 对象可以用来表示文件（如图片、音频、视频等），也可以用来表示其他类型的不可修改的二进制文件。

const blob = new Blob(["Hello, world!"], { type: "text/plain" });
console.log(blob);

2.2 File

File 对象是 Blob 对象的子类，通常用于表示用户通过 <input type="file">选择的文件。

const file = new File(["Hello, world!"], "hello.txt", { type: "text/plain" });
console.log(file);

2.3 Buffer

Buffer 是 Node.js 中用于处理二进制数据的对象。它是 Node.js 特有的，不是 JavaScript 标准的一部分。Buffer 类是 Uint8Array 的子类，提供了更丰富的 API 来处理二进制数据。

它类似于 ArrayBuffer，但主要用于服务器端。它能够高效地处理二进制数据，避免了频繁的内存分配和垃圾回收。

用于处理文件 I/O、网络 I/O 等需要高效处理二进制数据的场景

  const buffer = Buffer.from("Hello, world!");

2.4 ArrayBuffer

ArrayBuffer 是一种通用的、固定长度的二进制数据缓冲区。

它不能直接操作，而是需要通过 TypedArray 或 DataView 来读写。

ArrayBuffer与Bolb的关系:

• ArrayBuffer是底层二进制数据，可以借助工具进行读写，而 Blob是对底层二进制数据的封装 ，我们拿到的就是一个整体，能够读取他的大小，类型，但是不能看到细节。
• Blob可以接受一个ArrayBuffer作为参数生成一个Blob对象，此行为就相当于对ArrayBuffer数据做一个封装，之后就是以整体的形式展现了-Blob作为一个整体文件，适合用于传输；而只有需要关注细节（比如要修改某一段数据时），才需要用到ArrayBuffer

const buffer = new ArrayBuffer(8); // 创建一个8字节的缓冲区
const view = new Uint8Array(buffer); // 使用Uint8Array来读写缓冲区

2.5 Base64

Base64是一种基于64个可打印字符来表示二进制数据的方法。它通常用于在文本协议中传输二进制数据，如在 HTML 中嵌入图片。

 const base64String = btoa("Hello, world!"); // 将字符串转换为Base64
 console.log(base64String);
 const originalString = atob(base64String); // 将Base64转换回字符串
 console.log(originalString);

2.6 FileReader

通过fileReader可以将Blob、File读取为不同的格式

• FileReader.readAsDataURL(blob) 将二进制数据读取并编码为Base64格式
• FileReader.readAsText(blob) 就是将二进制数据读取并编码为字符串形式

2.7 FormData

使用FormData我们可以异步上传一个二进制文件，而这个二进制文件，就是我们上面讲的Blob对象。

3.场景选择

3.1 文件上传和下载

场景：

• 用户上传文件到服务器。
• 从服务器下载文件到本地。

推荐使用：

• Blob: 用于表示文件对象，适合用于文件上传和下载。
• ArrayBuffer: 用于处理文件的二进制数据，适合在文件上传前进行预处理（如压缩、加密等）。
• Base64: 用于在 HTML 中嵌入文件（如图片），或者在 AJAX 请求中传输文件数据

3.2 图片处理

场景：

• 在网页中显示图片。
• 对图片进行压缩、裁剪等操作。

推荐使用：

• Blob: 用于表示图片文件，适合用于文件上传和下载。
• ArrayBuffer: 用于处理图片的二进制数据，适合在图片处理库中使用。
• Base64: 用于在 HTML 中嵌入图片，或者在 AJAX 请求中传输图片数据。

3.3 音频和视频处理

场景：

• 播放音频和视频文件。
• 对音频和视频进行处理（如剪辑、转码等）。

推荐使用：

• Blob: 用于表示音频和视频文件，适合用于文件上传和下载。
• ArrayBuffer: 用于处理音频和视频的二进制数据，适合在音频和视频处理库中使用。
• Base64: 用于在 HTML 中嵌入音频和视频，或者在 AJAX 请求中传输音频和视频数据。

3.4 数据传输

场景：

• 通过 AJAX 请求传输二进制数据。
• 通过 WebSocket 传输二进制数据。

推荐使用：

• ArrayBuffer: 用于传输二进制数据，适合在 AJAX 和 WebSocket 中使用。
• Base64: 用于在文本协议中传输二进制数据，适合在 AJAX 请求中传输文件数据。

3.5 数据存储

场景：

• 在浏览器中存储二进制数据（如使用 IndexedDB）。
• 在服务器端存储二进制数据（如使用数据库）。

推荐使用：

• ArrayBuffer: 用于存储二进制数据，适合在 IndexedDB 和数据库中使用。
• Base64: 用于在文本协议中存储二进制数据，适合在数据库中存储文件数据。

3.6 总结

• Blob: 适合用于表示文件对象，适合文件上传和下载。
• ArrayBuffer: 适合用于处理二进制数据，适合在文件处理、音频视频处理、数据传输和存储中使用。
• Base64: 适合用于在文本协议中传输和存储二进制数据，适合在 HTML 中嵌入文件和在 AJAX 请求中传输文件数据。

4.转换方式

File转Blob

let aBlob = new Blob([file], {type: file.type})

Blob转File

let files = new window.File([this.blob], file.name, {type: file.type})

Blob 转 ArrayBuffer

const blob = new Blob(["Hello, world!"], { type: "text/plain" });
const reader = new FileReader();
reader.onload = function(event) {
    const arrayBuffer = event.target.result;
    console.log(arrayBuffer);
};
reader.readAsArrayBuffer(blob);

ArrayBuffer 转 Blob

const buffer = new ArrayBuffer(8);
const blob = new Blob([buffer], { type: "application/octet-stream" });

Blob 转 Base64

const blob = new Blob(["Hello, world!"], { type: "text/plain" });
const reader = new FileReader();
reader.onload = function(event) {
    const base64String = event.target.result;
    console.log(base64String);
};
reader.readAsDataURL(blob);

Base64 转 Blob

const base64String = "data:text/plain;base64,SGVsbG8sIHdvcmxkIQ==";
const byteCharacters = atob(base64String.split(',')[1]);
const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
    byteNumbers[i] = byteCharacters.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
const blob = new Blob([byteArray], { type: "text/plain" });

ArrayBuffer 转 Base64

const buffer = new ArrayBuffer(8);
const view = new Uint8Array(buffer);
const base64String = btoa(String.fromCharCode.apply(null, view));

Base64 转 ArrayBuffer

const base64String = "SGVsbG8sIHdvcmxkIQ==";
const byteCharacters = atob(base64String);
const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
    byteNumbers[i] = byteCharacters.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
const buffer = byteArray.buffer;

图片URL转base64

img2base64(imgUrl) {
  let image = new Image()
  image.src = imgUrl
  return new Promise((resolve) => {
    image.onload = () => {
      let canvas = document.createElement('canvas')
      canvas.width = image.width
      canvas.height = image.height
      var context = canvas.getContext('2d')
      context.drawImage(image, 0, 0, image.width, image.height)
      let dataUrl = canvas.toDataURL('image/png')
      resolve(dataUrl)
    }
  })
}