日期：2024年9月12日
作者：Commas
签名：(ง •_•)ง 积跬步以致千里,积小流以成江海……
注释：如果您觉得有所帮助，帮忙点个赞，也可以关注我，我们一起成长；如果有不对的地方，还望各位大佬不吝赐教，谢谢^ - ^
1.01365 = 37.7834；0.99365 = 0.0255
1.02365 = 1377.4083；0.98365 = 0.0006
文章目录
- 一、前言
- 二、二进制Blob传输：速度与效率的代名词
- 1、概念解析
- 2、优缺点
- （1）Blob传输的优势
- （2）Blob传输的劣势
- 3、适用场景
- 4、示例说明
- 三、Base64编码：兼容性与便捷性的选择
- 1、概念解析
- 2、Base64的亮点
- （1）Base64传输的优点
- （2）Base64传输的缺点
- 3、适用场景
- 4、示例说明
- 四、结语
一、前言
在当今 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
