JavaScript Base64 编码详解：实战、常见问题解答

2024-03-06 16:32:57

JavaScript 中的 Base64 编码：详解与实战

在 JavaScript 的世界里，处理二进制数据是一个常见的任务，例如图像、文档和视频。为了安全高效地传输和存储这些数据，Base64 编码是一种强大的工具。在这篇文章中，我们将深入探讨如何在 JavaScript 中使用 Base64 编码，并提供代码示例，帮助你掌握这项技术。

Base64：快速入门

Base64 是一种二进制到文本的编码方案，它将二进制数据表示为一串可打印的 ASCII 字符。这个过程使二进制数据能够安全可靠地存储在文本文件中、URL 中，或通过网络传输。

JavaScript 中的 Base64 编码

JavaScript 提供了 btoa() 函数，可以将字符串编码为 Base64。它的语法很简单：

const base64Str = btoa(str);

这里，str 是要编码的字符串，而 base64Str 是编码后的 Base64 字符串。

将图像文件编码为 Base64

将图像文件编码为 Base64 也很简单。首先，使用 FileReader API 读取文件的二进制内容。然后，再使用 btoa() 函数将二进制数据编码为 Base64。

const file = document.getElementById('file-input').files[0];
const reader = new FileReader();

reader.onload = function() {
  const base64Str = btoa(reader.result);
};

reader.readAsBinaryString(file);

使用 Blob 对象

另一种将文件转换为二进制数据的方法是使用 Blob 对象。它表示二进制数据，可以通过 FileReader 的 readAsDataURL() 方法创建。

const file = document.getElementById('file-input').files[0];
const reader = new FileReader();

reader.onload = function() {
  const blob = new Blob([reader.result]);
  const base64Str = btoa(blob);
};

reader.readAsDataURL(file);

解码 Base64 字符串

解码 Base64 编码的字符串也很容易，使用 atob() 函数即可。它的语法与 btoa() 相似：

const decodedStr = atob(base64Str);

实战案例：上传 Base64 编码的图像

现在，我们知道了如何将图像文件编码为 Base64，让我们编写一个 JavaScript 函数，将其上传到服务器：

function uploadImage(base64Str) {
  const xhr = new XMLHttpRequest();
  xhr.open('POST', 'upload.php');
  xhr.setRequestHeader('Content-Type', 'application/json');

  const data = {
    image: base64Str
  };

  xhr.send(JSON.stringify(data));
}