前端数据处理利器：btoa和atob的原理与实战

前端数据处理利器：btoa和atob的原理与实战

引用

CSDN

等

12

来源

1.

https://blog.csdn.net/qq_36380426/article/details/138174248

2.

https://blog.csdn.net/KimBing/article/details/124376031

3.

https://blog.csdn.net/weixin_45216614/article/details/103946626

4.

https://baijiahao.baidu.com/s?id=1807894740965969155

5.

https://cloud.baidu.com/article/3320935

6.

https://blog.csdn.net/qq_41581588/article/details/139402065

7.

https://m.blog.csdn.net/m_sy530/article/details/126527255

8.

https://baijiahao.baidu.com/s?id=1794649051032828094

9.

https://my.oschina.net/emacs_8518411/blog/16569998

10.

https://juejin.cn/post/6989391487200919566

11.

https://my.oschina.net/emacs_8518524/blog/16570202

12.

https://www.zhangxinxu.com/wordpress/2018/08/js-base64-atob-btoa-encode-decode/comment-page-1/

在前端开发中，我们经常需要处理各种数据格式的转换，比如将二进制数据转换为文本格式以便在网络中传输，或者将图片数据嵌入到HTML文档中。这时候，JavaScript内置的btoa和atob函数就派上了用场。它们主要用于Base64编码和解码，虽然不是严格意义上的加密算法，但在数据处理中扮演着重要角色。

Base64编码是一种将二进制数据转换成ASCII字符串的方法，使得数据能够在不支持二进制数据的环境中传输。它使用64个可打印字符（A-Z、a-z、0-9、+、/）来表示数据，每3个字节的二进制数据被转换为4个Base64字符。

函数定义

使用限制

• 只能处理纯文本数据，不能直接处理二进制数据
• 不支持非ASCII字符，需要特殊处理
• 编码后的字符串大小会增加约33%

非ASCII字符处理

由于btoa和atob只支持ASCII字符，处理中文等Unicode字符时需要额外步骤：

function utf8ToBase64(str) {
  return btoa(unescape(encodeURIComponent(str)));
}

function base64ToUtf8(base64) {
  return decodeURIComponent(escape(atob(base64)));
}

1. 数据传输

在HTTP请求中传输二进制数据时，可以先将其转换为Base64字符串：

const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', async (event) => {
  const file = event.target.files[0];
  const reader = new FileReader();
  reader.onloadend = function() {
    const base64Data = reader.result.split(',')[1];
    // 发送base64Data到服务器
  };
  reader.readAsDataURL(file);
});

2. 图片处理

将图片转换为Base64数据URL，可以直接在HTML中使用：

const img = document.createElement('img');
const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0];
  const reader = new FileReader();
  reader.onloadend = function() {
    img.src = reader.result;
    document.body.appendChild(img);
  };
  reader.readAsDataURL(file);
});

3. 文件处理

将Base64编码的文件数据还原为File对象：

function base64ToFile(base64String, fileName) {
  const arr = base64String.split(',');
  const mime = arr[0].match(/:(.*?);/)[1];
  const bstr = atob(arr[1]);
  let n = bstr.length;
  const u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new File([u8arr], fileName, { type: mime });
}

TextEncoder/Decoder API

对于更复杂的二进制数据处理，可以使用TextEncoder和TextDecoder：

const encoder = new TextEncoder();
const decoder = new TextDecoder();

const uint8Array = encoder.encode("🍎苹果");
const base64 = btoa(String.fromCharCode(...uint8Array));
const binaryStr = atob(base64);
const decodedArray = new Uint8Array([...binaryStr].map(c => c.charCodeAt(0)));
console.log(decoder.decode(decodedArray)); // "🍎苹果"

Node.js中的Buffer

在Node.js环境中，可以使用Buffer对象实现类似功能：

const base64 = Buffer.from("Node.js数据").toString('base64'); 
const original = Buffer.from(base64, 'base64').toString(); 

性能优化

处理大文件时需要分块读取，避免内存溢出：

async function encodeLargeFile(file) {
  const chunkSize = 1024 * 1024; // 1MB
  let offset = 0;
  while (offset < file.size) {
    const chunk = file.slice(offset, offset + chunkSize);
    const arrayBuffer = await chunk.arrayBuffer();
    const base64Chunk = btoa(String.fromCharCode(...new Uint8Array(arrayBuffer)));
    // 发送或存储 base64Chunk
    offset += chunkSize;
  }
}

安全性提示

虽然Base64编码可以隐藏数据，但它不是加密算法，不要用于敏感数据保护。真正的加密应该使用Web Crypto API等专业工具。

通过以上内容，我们可以看到btoa和atob在前端数据处理中的重要作用。虽然它们有局限性，但掌握其使用方法和替代方案，可以让我们在开发中更加得心应手。