JavaScript Academy · 课时

Blob 与对象 URL

Q: 「Blob 与对象 URL」这节课中我会学到什么？

创建并使用 Blob URL 进行下载。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

创建并使用 Blob URL 进行下载。

Blob 与对象 URL 是 CoddyKit 上的免费 JavaScript Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 JavaScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 4 节课。

什么是二进制大对象

二进制大对象表示存储在内存中的不可变原始数据，例如文件内容。文件是二进制大对象的一种特殊类型，具有名称和修改日期。

二进制大对象让您可以在浏览器中构建、切分和下载二进制数据。

创建二进制大对象

从一个由多个部分组成的数组（字符串、缓冲区或其他二进制大对象）构造二进制大对象，并使用选项对象指定 MIME type。

const blob = new Blob(['Hello, world!'], { type: 'text/plain' });

console.log(blob.size);
console.log(blob.type);

由多个部分构成的二进制大对象

部分数组会按照顺序连接起来。您可以混合使用字符串和类型化数组。

const blob = new Blob(['line 1\n', 'line 2\n', 'line 3'], {
  type: 'text/plain'
});

console.log(blob.size + ' bytes');

读取二进制大对象

二进制大对象提供基于 Promise 的 text()、arrayBuffer() 和 stream() 方法，用于读取其内容。

async function show() {
  const blob = new Blob(['stored data'], { type: 'text/plain' });
  const text = await blob.text();
  console.log(text);
}

show();

切分二进制大对象

blob.slice(start, end) 会返回一个覆盖原对象部分内容的新二进制大对象，而不会复制整个对象。它适合用于分块上传。

const blob = new Blob(['ABCDEFGHIJ'], { type: 'text/plain' });
const chunk = blob.slice(0, 5);

console.log(chunk.size);

创建对象 URL

URL.createObjectURL(blob) 会返回一个指向内存中二进制大对象的短期 URL。您可以将它用作 img.src、链接的 href 或视频源。

const blob = new Blob(['data'], { type: 'text/plain' });
const url = URL.createObjectURL(blob);

console.log(url.startsWith('blob:'));

预览上传的图像

将选中的文件转换为对象 URL，并将其赋给图像元素，即可立即预览，无需与服务器往返通信。

const file = document.querySelector('#picker').files[0];
const url = URL.createObjectURL(file);
const img = document.querySelector('#preview');
img.src = url;

console.log('preview ready');

触发下载

创建一个二进制大对象，生成对象 URL，然后点击带有 download 属性的临时锚点，以保存生成的文件。

function download(text, filename) {
  const blob = new Blob([text], { type: 'text/plain' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  a.click();
  URL.revokeObjectURL(url);
}

download('report data', 'report.txt');

撤销对象 URL

对象 URL 会一直将二进制大对象保存在内存中，直到您调用 URL.revokeObjectURL(url)。使用完毕后务必撤销，以避免内存泄漏。

const blob = new Blob(['temp'], { type: 'text/plain' });
const url = URL.createObjectURL(blob);

console.log('using ' + url);
URL.revokeObjectURL(url);
console.log('revoked');

二进制大对象和 JSON

将数据转换为字符串后，使用正确的 MIME 类型将其放入二进制大对象，即可构建可下载的 JSON 文件。

const data = { name: 'Ada', score: 99 };
const blob = new Blob([JSON.stringify(data, null, 2)], {
  type: 'application/json'
});

console.log(blob.type);
console.log(blob.size + ' bytes');

二进制大对象为什么重要

二进制大对象和对象 URL 让您可以完全在客户端处理二进制数据：预览上传内容、生成下载内容，以及分块处理大型文件。完成后请记得撤销 URL。接下来，您将使用 fetch 将文件发送到服务器。

const blob = new Blob(['export'], { type: 'text/csv' });
const url = URL.createObjectURL(blob);
console.log('csv url created:', url.startsWith('blob:'));
URL.revokeObjectURL(url);

快速检查

使用对象 URL 下载后，应调用什么来释放内存？

回顾：二进制大对象和对象 URL

您已经学会了如何处理二进制数据：

new Blob(parts, { type }) 会构建不可变的二进制数据。
使用 text() 和 arrayBuffer() 读取；使用 slice() 进行切分。
URL.createObjectURL 会创建可用于预览和下载的 blob: URL。
完成后务必调用 URL.revokeObjectURL 以释放内存。

常见问题解答

「Blob 与对象 URL」课时是免费的吗？

是的 — 「Blob 与对象 URL」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 JavaScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 4 节课。

「Blob 与对象 URL」这节课中我会学到什么？

创建并使用 Blob URL 进行下载。你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 JavaScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「Blob 与对象 URL」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 JavaScript Academy 课中编写并运行代码吗？

能。每节 JavaScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 JavaScript Academy