浅谈JavaScript中的Blob对象。

最新推荐文章于 2024-07-17 16:30:43 发布

hsany330

最新推荐文章于 2024-07-17 16:30:43 发布

阅读量692

点赞数

原文链接：https://www.jianshu.com/p/33564726aed8

版权

记得很早以前，我打开斗鱼网站，想看看斗鱼的直播内容的来源URL是什么，但是通过调试台找了半天，只招到了一个Blob开头的URL，我复制这个URL在浏览器中打开，结果毛都没看到一个，这不免引起了我对这东西的好奇心。

也许你从没听说过Blob，或者听说过没见过更没用过，我相信这篇文章都会让你对Blob有一个最基本的理解。

Blob = Binary Large Object的缩写，直译为二进制大对象，虽然在大多数前端开发中并不常见，但实际上在MYSQL数据库中，可以通过设置一个BLOB类型的数据来存储一个BLOB对象的内容。

更多理论的东西，可以参考MDN官网 https://developer.mozilla.org/zh-CN/docs/Web/API/Blob/Blob

创建一个Blob对象

本段落大致看看，知道如何创建Blob对象就可以。

let blob = new Blob(Array,options)

参数Array：是一个由ArrayBuffer ArrayBufferView Blob Blob 对象表示一个不可变、原始数据的类文件对象。DOMString 等对象构成的 Array ，或者其他类似对象的混合体，它将会被放进 Blob 。DOMStrings会被编码为UTF-8。

参数options：
1、type 用来表示文件类型，例如 'text/json' 代表一个JSON文件，'text/html'代表一个HTML文件。

2、endings 默认值为"transparent"，用于指定包含行结束符\n的字符串如何被写入。它是以下两个值中的一个： "native"，表示行结束符会被更改为适合宿主操作系统文件系统的换行符； "transparent"，表示会保持blob中保存的结束符不变。

一般type常用。

对象上的方法

1、 Blob.size 获取blob对象的大小（字节）

let blob = new Blob(['hello world'],{type:'text/plain'})
console.log(blob.size)

2、Blob.type 获取文件类型

let blob = new Blob(['hello world'],{type:'text/plain'})
console.log(blob.size)

Blob.slice([start[, end[, contentType]]]) 返回一个新的Blob对象，包含了源Blob对象中指定范围内的数据。通常可用于大文件截取上传

let blob = new Blob(['hello world'],{type:'text/plain'})
console.log(blob.slice(0,5,'text/plain'))

生成Blob链接

可以借助window.URL(点我跳转到官网) 对象上的方法。

1、URL.createObjectURL(blob); 如果传入的参数是blob对象的话，则可以生成一个blob链接。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<a id="id" download="a.txt">点我</a>
<script>
    let blob = new Blob(['hello world'],{type:'text/plain'})
    document.getElementById('id').href = URL.createObjectURL(blob)
</script>
</body>
</html>

以上述代码为例，我将包含'hello world'字符串的blob链接通过 createObjectURL 创建了blob链接，并赋值给了a标签的href属性。
通过a标签的download属性触发下载方法，下载名为a.txt的文本文档。
下载后，a.txt的内容，为“hello world”。

2、URL.revokeObjectURL() 静态方法用来释放一个之前通过调用 URL.createObjectURL() 创建的已经存在的 URL 对象。当你结束使用某个 URL 对象时，应该通过调用这个方法来让浏览器知道不再需要保持这个文件的引用了。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<a id="id" download="a.txt">点我</a>
<button id="btn">销毁</button>
<script>
    let blob = new Blob(['hello world'],{type:'text/plain'})
    let url = URL.createObjectURL(blob)
    document.getElementById('id').href = url
    document.getElementById('btn').onclick = function () {
        URL.revokeObjectURL(url)
    }
</script>
</body>
</html>

默认点击a标签触发下载，
点击销毁按钮后，再点击a标签，下载失效。因为URL已经被销毁。

日常应用

1、可用于隐藏视频播放器的真实地址
由于需要后台支撑，故可参考https://blog.csdn.net/qincidong/article/details/82781699

2、使用 createObjectURL(blob) 输出页面，移动端长按保存，转发。

3、开源代码库可以在线自定义配置文件并下载JSON，也可以通过blob的方式生成。

mime类型列表

http://www.w3school.com.cn/media/media_mimeref.asp

作者：派大C
链接：https://www.jianshu.com/p/33564726aed8
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。