什么是blob协议

前言

最近闲来无事， 想看下juejin沸点图片上传是怎么做的，随后发现，这是啥玩意，怎么有个https协议前有个blob？

难道这是啥最新的图片传输协议吗？那么下面就来了解一下这是个什么东东。

blob协议

简介

说blob是一个协议可能不太准确，他只算一种伪协议，因为他只能由浏览器内部生成，它说生成的URL只是JavaScript中对Blob或者File对象的一种特殊引用。

Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作。

Blob 表示的不一定是 JavaScript 原生格式的数据。File 接口基于 Blob，继承了 blob 的功能并将其扩展以支持用户系统上的文件。

我们可以在浏览器器的控制台输入

1
2

var data = URL.createObjectURL(new Blob(["This blob "], {type: "text/plain"}))
console.log("URL:",data)

随后我们就会得到一个blob地址，打开就会看到This blob的文本信息。

类似于在网页端展示二进制数据时，使用data:协议来展示数据，例如上传图片后将二进制数据转换为Base64后，再用data协议来展示。

场景

那么什么时候适合使用blob协议呢？

例如我们可以使用blob对象来隐藏真实的资源路径，或者表示本地图片路径，在一定程度上可以起到数据保密安全性，或者说是干扰爬虫程序。

或者视频流播放，前端通过网络请求获得到视频数据，随后将其转换为blob的协议，这样就可以提升视频链接被直接F12获取到的问题，例如B站视频等网站，这样可以提升了一丢爬虫难度（(^_^)），因为blob协议URL只存在于当前浏览器的会话中。

优点

正如前面所提到的相对于data等协议，它具有以下优点：

1. 无需转换开销，不像Base64图片会产生额外的大小
2. 提升系统安全，增加被爬虫难度