在前端开发中，我们经常需要从服务端获取文件或者数据块。而对象 URL（Object URL）是一种十分方便的方式，它可以让我们通过 URL 访问到 JavaScript 中创建的 Blob 或 File 对象。
本篇文章将会介绍如何使用对象 URL 获取文件或数据块，并且提供示例代码。
创建对象 URL
要使用对象 URL，我们必须先创建一个 Blob 或 File 对象，然后调用 URL.createObjectURL() 方法生成一个 URL。
const text = 'Hello, world!';
const blob = new Blob([text], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
console.log(url); // 输出类似于 blob:http://example.com/01234567-89ab-cdef-0123-456789abcdef 的字符串上述代码中，我们首先创建了一个包含文本内容的 Blob 对象，并指定了 MIME 类型为 text/plain。然后调用 URL.createObjectURL() 方法生成一个对象 URL，并将它打印到控制台中。
需要注意的是，由于对象 URL 是一个临时 URL，当我们不再需要它的时候，应该调用 URL.revokeObjectURL() 方法释放它所占用的资源。
URL.revokeObjectURL(url);
获取文件内容
有了对象 URL，我们就可以通过 AJAX 或 Fetch API 从服务端获取文件内容并将其显示在页面上。下面是一个使用 Fetch API 获取文本文件内容的示例：
fetch(url) .then(response => response.text()) .then(data => console.log(data)) .catch(error => console.error(error));
在上述代码中，我们首先使用 Fetch API 发起了一个 GET 请求，并指定了对象 URL 作为请求地址。然后通过 .text() 方法将响应转换成文本格式，并输出到控制台中。
需要注意的是，由于 Fetch API 默认情况下不会发送任何凭据信息（例如 cookie 和 HTTP 认证信息），如果需要让服务器接收这些信息，可以设置 credentials 选项为 include。
获取数据块
除了获取文件内容之外，我们还可以使用对象 URL 获取 Blob 对象中的一部分数据块。这可以通过使用 Blob.slice() 方法实现。
下面是一个从 Blob 对象中获取前 10 个字节并以文本格式显示的示例：
-- -------------------- ---- ------- ----- --------- - -- ----- ------- - --- ----- --------- - --------------------- --------- ----- ------ - --- ------------- ---------------------------------- -- -- - --------------------------- -- ----- ------- ---- --- -----------------------------
在上述代码中，我们首先使用 Blob.slice() 方法获取了 Blob 对象中从第 0 个字节到第 10 个字节之间的数据块。然后创建了一个 FileReader 对象，并使用它将数据块以文本格式读取出来并输出到控制台中。
需要注意的是，由于 FileReader 是异步的，我们需要在 loadend 事件触发时才能获取到数据块的内容。另外，我们还可以使用 Blob.size 属性获取 Blob 对象的大小。
总结
本文介绍了如何使用对象 URL 获取文件或数据块，并提供了相应的示例代码。需要注意的是，由于对象 URL 是一个临时 URL，当我们不再需要它的时候，应该调用 URL.revokeObjectURL() 方法释放它所占用的资源。
对于想要进一步了解 Fetch API 和 Blob.slice() 方法的读者，可以查看以下链接：
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/12063