【JS|第27期】网页文件传输：Blob与Base64的对决

日期：2024年9月12日
作者：Commas
签名：(ง •_•)ง 积跬步以致千里,积小流以成江海……
注释：如果您觉得有所帮助，帮忙点个赞，也可以关注我，我们一起成长；如果有不对的地方，还望各位大佬不吝赐教，谢谢^ - ^
1.01³⁶⁵ = 37.7834；0.99³⁶⁵ = 0.0255
1.02³⁶⁵ = 1377.4083；0.98³⁶⁵ = 0.0006

一、前言

在当今 Web 开发中，文件传输是不可或缺的一环。无论是上传用户头像、分享文档，还是处理多媒体内容，高效、安全的文件传输方式都是关键。网页的文件传输有多种方式，包括但不限于 二进制 blob 传输 和 base64传输。本文将深入探讨这两种常见的文件传输技术，解析它们的优缺点、适应场景和使用方法。

二、二进制Blob传输：速度与效率的代名词

1、概念解析

Blob，全称Binary Large Object，是一种用于存储大量二进制数据的对象。在 Web 环境里，Blob 用于封装文件或二进制数据流，如图片或文件内容。

2、优缺点

（1）Blob传输的优势

• 高效传输：直接传输二进制数据，无额外编码损耗，特别适合大文件。
• 内存效率：对于大文件传输，Blob 可以利用 FileReader 的 readAsArrayBuffer 方法进行流式读取，降低内存占用。
• 资源消耗低：对于大文件如高清图片、视频，Blob 传输效率高，服务器压力小。
• 跨源资源共享（CORS）：Blob 传输支持 CORS，使得跨域文件传输成为可能。

（2）Blob传输的劣势

• 浏览器兼容性：Blob 在一些老旧浏览器版本中可能不受支持，限制了其广泛应用的场景。
• 传输复杂性：与字符串数据相比，二进制数据的传输和处理通常更为复杂。

3、适用场景

• 适合大文件传输场景，像传输高清视频、大型压缩文件等。在这些场景下，效率是关键，二进制 Blob 传输能够很好地满足需求。

• 对于实时性要求高的场景，例如实时音视频流传输，减少编码解码的时间能够有效降低延迟，从而提供更流畅的用户体验。

4、示例说明

在前端，通过 FormData 对象可以轻松封装 Blob 数据，然后通过 fetch 或 XMLHttpRequest 发送到服务器。例如，上传一张图片时：

let file = document.querySelector('input[type="file"]').files[0];
let formData = new FormData();
formData.append('image', file);
fetch('/upload-image', {
  method: 'POST',
  body: formData
});

三、Base64编码：兼容性与便捷性的选择

1、概念解析

Base64 是一种将二进制数据转换成文本字符串的编码方式，使得数据可以在不兼容二进制的传输层中安全传输，常见于 URL 、Cookie 或邮件中传输二进制数据。

2、Base64的亮点

（1）Base64传输的优点

• 广泛兼容：文本格式的特性使其在各种环境中都能良好工作，兼容性极高。
• 嵌入性：Base64 编码的数据可以直接嵌入到 HTML、CSS、JSON 等文本格式中。

（2）Base64传输的缺点

• 数据膨胀：Base64 编码会增加原始数据大小的约 33%，增加了网络传输负担，因此传输效率低于 Blob。
• 性能开销：编码和解码过程需要额外的 CPU 资源，影响传输效率。

3、适用场景

• 对于小文件传输来说比较适用，像一些小图标、简单的文本文件等，Base64 编码后的大小增加并不明显，使用起来很方便。

• 在嵌入资源方面表现出色，例如在 HTML 中直接嵌入小型图片、字体文件等，这样可以避免额外的文件请求，提高网页的加载速度。

4、示例说明

封装示例：

// 将文件转换为Base64字符串
function fileToBase64(file, callback) {
  const reader = new FileReader();
  reader.onloadend = function() {
    const base64String = reader.result.split(',')[1];
    callback(base64String);
  };
  reader.readAsDataURL(file);
}

// 使用Base64字符串
fileToBase64(file, (base64String) => {
  // 将Base64字符串设置为图片的src属性
  document.getElementById('image').src = `data:image/png;base64,${base64String}`;
});

调用示例：

fileToBase64(file,function(base64String){
  fetch('/upload-image', {
    method: 'POST',
    body: JSON.stringify({image: base64String}),
    headers: {'Content-Type': 'application/json'}
  });
})

四、结语

无论是追求速度与效率的 Blob，还是兼容性与便捷性的 Base64，选择最适合项目需求的方案，才能在 Web 开发的广阔天地中游刃有余。

参考文章：

• 《VB6玩转Base64数据：编码与解码指南》
• 《今日头条 Base64编码》

版权声明：本文为博主原创文章，如需转载，请给出：
原文链接：https://blog.csdn.net/qq_35844043/article/details/141724645