【js】Blob

最新推荐文章于 2024-05-19 02:05:52 发布

云川之下

最新推荐文章于 2024-05-19 02:05:52 发布

阅读量321

点赞数

原文链接：https://segmentfault.com/a/1190000022812794

版权

文章目录

一、Blob 是什么

Blob（Binary Large Object）表示二进制类型的大对象。在数据库管理系统中，将二进制数据存储为一个单一个体的集合。Blob 通常是影像、声音或多媒体文件。在 JavaScript 中 Blob 类型的对象表示不可变的类似文件对象的原始数据。为了更直观的感受 Blob 对象，我们先来使用 Blob 构造函数，创建一个 myBlob 对象，具体如下图所示：

        const myBlob : Blob = new Blob(["abc"], { type: "text/plain" })
        console.log(myBlob)

在这里插入图片描述

如你所见，myBlob 对象含有两个属性：size 和type。其中 size 属性用于表示数据的大小（以字节为单位），type是 MIME 类型的字符串。Blob表示的不一定是 JavaScript 原生格式的数据。比如 File接口基于 Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。

二、Blob API 简介

Blob 由一个可选的字符串type（通常是 MIME 类型）和 blobParts 组成：
在这里插入图片描述

MIME（Multipurpose Internet Mail Extensions）多用途互联网邮件扩展类型，是设定某种扩展名的文件用一种应用程序来打开的方式类型，当该扩展名文件被访问的时候，浏览器会自动使用指定应用程序来打开。多用于指定一些客户端自定义的文件名，以及一些媒体文件打开方式。
常见的 MIME 类型有：超文本标记语言文本 .html text/html、PNG图像 .png image/png、普通文本 .txt text/plain 等。

2.1 构造函数

ar aBlob = new Blob(blobParts, options);

2.2 属性

前面我们已经知道 Blob 对象包含两个属性：

size（只读）：表示Blob对象中所包含数据的大小（以字节为单位）。
type（只读）：一个字符串，表明该 Blob 对象所包含数据的 MIME 类型。如果类型未知，则该值为空字符串。

2.3 方法

slice([start[, end[, contentType]]])：返回一个新的 Blob 对象，包含了源 Blob 对象中指定范围内的数据。
stream()：返回一个能读取 blob 内容的 ReadableStream。
text()：返回一个 Promise 对象且包含 blob 所有内容的 UTF-8 格式的 USVString。
arrayBuffer()：返回一个 Promise 对象且包含 blob 所有内容的二进制格式的 ArrayBuffer。

这里我们需要注意的是，Blob 对象是不可改变的。我们不能直接在一个 Blob 中更改数据，但是我们可以对一个 Blob 进行分割，从其中创建新的 Blob 对象，将它们混合到一个新的 Blob 中。这种行为类似于 JavaScript 字符串：我们无法更改字符串中的字符，但可以创建新的更正后的字符串。

三、Blob 使用场景

3.1 分片上传

File 对象是特殊类型的 Blob，且可以用在任意的 Blob 类型的上下文中。所以针对大文件传输的场景，我们可以使用 slice 方法对大文件进行切割，然后分片进行上传，具体示例如下：

const file = new File(["a".repeat(1000000)], "test.txt"); //构建1000000长度的字符

const chunkSize = 40000;   //每个分片的长度
const url = "https://httpbin.org/post";

async function chunkedUpload() {
  for (let start = 0; start < file.size; start += chunkSize) {
      const chunk = file.slice(start, start + chunkSize + 1);//每次截取一个分段长度
      const fd = new FormData();
      fd.append("data", chunk);

      await fetch(url, { method: "post", body: fd }).then((res) =>
        res.text()
      );
  }
}

上文中用的File，不是Blob，但是File继承了Blob，本质上也是Blob

//lib.dom.d.ts
interface File extends Blob {
    readonly lastModified: number;
    /** @deprecated */
    readonly lastModifiedDate: Date;
    readonly name: string;
    readonly webkitRelativePath: string;
}

3.2 从互联网下载数据

我们可以使用以下方法从互联网上下载数据并将数据存储到 Blob 对象中，比如：

const downloadBlob = (url, callback) => {
    const xhr = new XMLHttpRequest()
    xhr.open('GET', url)
    xhr.responseType = 'blob'
    xhr.onload = () => {
    callback(xhr.response)
    }
    xhr.send(null)
}

当然除了使用 XMLHttpRequest API之外，我们也可以使用 fetch API 来实现以流的方式获取二进制数据。这里我们来看一下如何使用 fetch API获取线上图片并本地显示，具体实现如下：

html

<!DOCTYPE html>
<html>
  <body>
    <img>
  </body>
</html>

const myImage = document.querySelector('img');
const myRequest = new Request('flowers.jpg');

fetch(myRequest)
  .then(function(response) {
    return response.blob();
  })
 .then(function(myBlob) {
   let objectURL = URL.createObjectURL(myBlob);
   myImage.src = objectURL;
});

当 fetch 请求成功的时候，我们调用 response对象的 blob()方法，从 response对象中读取一个 Blob 对象，然后使用 createObjectURL() 方法创建一个 objectURL，然后把它赋值给 img元素的src 属性从而显示这张图片。

此时可能看不懂URL.createObjectURL及myImage.src = objectURL;
没关系，可以先看后面的章节，回头再来看，就明白了

fetch的用法可以参考《fetch》

3.3 Blob 用作 URL

Blob 可以很容易的作为、或其他标签的 URL，多亏了 type 属性，我们也可以上传/下载 Blob 对象。下面我们将举一个 Blob 文件下载的示例，不过在看具体示例前我们得简单介绍一下 Blob URL。

1.Blob URL/Object URL

Blob URL/Object URL 是一种伪协议，允许Blob和 File 对象用作图像，下载二进制数据链接等的 URL 源。在浏览器中，我们使用 URL.createObjectURL 方法来创建 Blob URL，该方法接收一个 Blob 对象，并为其创建一个唯一的 URL，其形式为 blob:/，对应的示例如下：

blob:https://example.org/40a5fb5a-d56d-4a33-b4e2-0acf6a8e5f641

浏览器内部为每个通过 URL.createObjectURL生成的 URL 存储了一个 URL → Blob 映射。因此，此类 URL 较短，但可以访问 Blob。生成的 URL 仅在当前文档打开的状态下才有效。它允许引用 <img>、<a> 中的Blob，但如果你访问的 Blob URL 不再存在，则会从浏览器中收到 404 错误。

上述的 Blob URL看似很不错，但实际上它也有副作用。虽然存储了 URL → Blob 的映射，但 Blob 本身仍驻留在内存中，浏览器无法释放它。映射在文档卸载时自动清除，因此 Blob 对象随后被释放。但是，如果应用程序寿命很长，那不会很快发生。因此，如果我们创建一个 Blob URL，即使不再需要该 Blob，它也会存在内存中。

针对这个问题，我们可以调用 URL.revokeObjectURL(url)方法，从内部映射中删除引用，从而允许删除Blob（如果没有其他引用），并释放内存。接下来，我们来看一下 Blob 文件下载的具体示例。

2.Blob 文件下载示例

新建index.html，index.js，置于同一级目录下。

如果出现乱码，注意文件自身编码类型，也改为utf-8

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Blob 文件下载示例</title>
  </head>

  <body>
    <button id="downloadBtn">文件下载</button>
    <script src="index.js"></script>
  </body>
</html>

index.js

const download = (fileName, blob) => {
  const link = document.createElement("a");  //动态创建a标签
  link.href = URL.createObjectURL(blob);
  link.download = fileName;
  link.click();              //模拟手动触发点击事件
  link.remove();             //移除a标签
  URL.revokeObjectURL(link.href);   //移除url引用，回收内存
};

const downloadBtn = document.querySelector("#downloadBtn");
downloadBtn.addEventListener("click", (event) => {
  const fileName = "blob.txt";
  const myBlob = new Blob(["一文彻底掌握 Blob Web API"], { type: "text/plain" });
  download(fileName, myBlob);
});

在示例中，我们通过调用 Blob 的构造函数来创建类型为 "text/plain"的 Blob 对象，然后通过动态创建 a标签来实现文件的下载。

3.4 Blob 转换为 Base64

URL.createObjectURL 的一个替代方法是，将 Blob 转换为 base64 编码的字符串。Base64 是一种基于 64 个可打印字符来表示二进制数据的表示方法，它常用于在处理文本数据的场合，表示、传输、存储一些二进制数据，包括 MIME 的电子邮件及 XML 的一些复杂数据。

在 MIME 格式的电子邮件中，base64 可以用来将二进制的字节序列数据编码成 ASCII 字符序列构成的文本。使用时，在传输编码方式中指定 base64。使用的字符包括大小写拉丁字母各 26 个、数字 10 个、加号 + 和斜杠 /，共 64 个字符，等号 = 用来作为后缀用途。

下面我们来介绍如何在 HTML 中嵌入 base64 编码的图片。在编写 HTML 网页时，对于一些简单图片，通常会选择将图片内容直接内嵌在网页中，从而减少不必要的网络请求，但是图片数据是二进制数据，该怎么嵌入呢？绝大多数现代浏览器都支持一种名为 Data URLs 的特性，允许使用 base64 对图片或其他文件的二进制数据进行编码，将其作为文本字符串嵌入网页中。

Data URLs由四个部分组成：前缀（data:）、指示数据类型的 MIME 类型、如果非文本则为可选的 base64标记、数据本身：

data:[<mediatype>][;base64],<data>

mediatype 是个 MIME 类型的字符串，例如 "image/jpeg" 表示 JPEG 图像文件。如果被省略，则默认值为text/plain;charset=US-ASCII。如果数据是文本类型，你可以直接将文本嵌入（根据文档类型，使用合适的实体字符或转义字符）。如果是二进制数据，你可以将数据进行 base64 编码之后再进行嵌入。比如嵌入一张图片：

<img alt="logo" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...">

但需要注意的是：如果图片较大，图片的色彩层次比较丰富，则不适合使用这种方式，因为该图片经过 base64 编码后的字符串非常大，会明显增大 HTML 页面的大小，从而影响加载速度。除此之外，利用 FileReader API，我们也可以方便的实现图片本地预览功能，具体代码如下：

    <input type="file" accept="image/*" onchange="loadFile(event)">
    <img id="output"/>

    <script>
      const loadFile = function(event) {
        const reader = new FileReader();
        reader.onload = function(){
          const output = document.querySelector('#output');
          output.src = reader.result;  //result属性的值是 "data:image/jpeg;base64,/9j/4AAQSkZJRgAB....."
        };
        reader.readAsDataURL(event.target.files[0]);    //开始读，读完后会触发fileReader.onload，读的方式决定了result属性类型
      };
    </script>

在以上示例中，我们为 file 类型输入框绑定 onchange事件处理函数 loadFile，在该函数中，我们创建了一个 FileReader 对象并为该对象绑定 onload 相应的事件处理函数，然后调用 FileReader 对象的 readAsDataURL() 方法，把本地图片对应的 File 对象转换为 Data URL。

在完成本地图片预览之后，我们可以直接把图片对应的Data URLs 数据提交到服务器。针对这种情形，服务端需要做一些相关处理，才能正常保存上传的图片，这里以 Express 为例，具体处理代码如下：

const app = require('express')();

app.post('/upload', function(req, res){
    let imgData = req.body.imgData; // 获取POST请求中的base64图片数据
    let base64Data = imgData.replace(/^data:image\/\w+;base64,/, "");
    let dataBuffer = Buffer.from(base64Data, 'base64');
    fs.writeFile("image.png", dataBuffer, function(err) {  //有点没看懂，fs是啥
        if(err){
          res.send(err);
        }else{
          res.send("图片上传成功！");
        }
    });
});

上面这个例子不是完整代码，有点没看懂

对于 FileReader 对象来说，除了支持把 Blob/File 对象转换为 Data URL 之外，它还提供了readAsArrayBuffer()和 readAsText() 方法，用于把 Blob/File对象转换为其它的数据格式。这里我们来看个 readAsArrayBuffer()的使用示例：

// 从 blob 获取 arrayBuffer
let fileReader = new FileReader();

fileReader.onload = function(event) {    
  let arrayBuffer = fileReader.result; //result属性类型是ArrayBuffer
};
fileReader.readAsArrayBuffer(blob);   //开始读，读完后会触发fileReader.onload，读的方式决定了result属性类型

云川之下

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【js】Blob

文章目录一、Blob 是什么二、Blob API 简介2.1 构造函数2.2 属性2.3 方法三、Blob 使用场景3.1 分片上传3.2 从互联网下载数据3.3 Blob 用作 URL1.Blob URL/Object URL2.Blob 文件下载示例一、Blob 是什么Blob（Binary Large Object）表示二进制类型的大对象。在数据库管理系统中，将二进制数据存储为一个单一个体的集合。Blob 通常是影像、声音或多媒体文件。在 JavaScript 中 Blob 类型的对象表示不可变的
复制链接

扫一扫