URL.createObjectURL() 是 JavaScript 中的一个方法，用于创建一个特殊的 URL，该 URL 可以用于将不支持直接加载的数据（如二进制数据或 Blob 对象）嵌入到 web 页面中。这个方法通常用于将文件或数据转换成可供浏览器加载的 URL。

语法

const objectURL = URL.createObjectURL(object);

参数

object：要创建 URL 的对象，通常是一个 Blob 对象或一个 File 对象。

返回值

objectURL：一个字符串，表示创建的 URL。这个 URL 可以被用作图像、音频、视频等多媒体元素的 src 属性，或者作为超链接的 href 属性。

用途:

• 用于在 web 页面上显示二进制数据，如图片、音频、视频等。
• 可用于预览用户上传的文件，不必将文件上传到服务器。
• 可用于处理客户端生成的数据，如绘制到 <canvas> 元素后创建 URL 以供下载。

示例

// 创建一个 Blob 对象
const blob = new Blob(['Hello, world!'], { type: 'text/plain' });

// 使用 URL.createObjectURL 创建一个可用于展示 Blob 数据的 URL
const objectURL = URL.createObjectURL(blob);

// 在页面上展示这个 URL
const imageElement = document.createElement('img');
imageElement.src = objectURL;
document.body.appendChild(imageElement);

// 一旦不再需要，可以通过调用 URL.revokeObjectURL() 来释放资源
URL.revokeObjectURL(objectURL);

下载文件

// 创建一个按钮来触发保存文件操作
const saveButton = document.createElement('button');
saveButton.textContent = '保存文件';
document.body.appendChild(saveButton);

// 创建文本数据
const textData = '这是要保存的文本数据';

// 创建一个 Blob 对象，将文本数据放入其中
const blob = new Blob([textData], { type: 'text/plain' });

// 创建一个链接元素，允许用户下载文件
const downloadLink = document.createElement('a');
downloadLink.textContent = '下载文件';
downloadLink.style.display = 'none'; // 隐藏链接
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'myFile.txt'; // 指定下载时的文件名

// 添加链接到文档
document.body.appendChild(downloadLink);

// 添加点击事件监听器，以触发下载
saveButton.addEventListener('click', function() {
  downloadLink.click();
});

// 在不再需要时，释放资源
downloadLink.addEventListener('click', function() {
  URL.revokeObjectURL(downloadLink.href);
});

注意事项

• 创建的 URL 在使用后应该通过 URL.revokeObjectURL() 进行释放，以释放浏览器资源。
• 不同浏览器可能对支持的对象类型和 MIME 类型有所不同，因此在使用之前最好检查浏览器的兼容性。

总结

URL.createObjectURL() 是一个有用的方法，可用于在 web 页面中处理二进制数据和文件，使其能够以 URL 的形式在页面上展示。