URL.createObjectURL() 怎么使用

URL.createObjectURL() 是一个 Web API，允许你创建一个指向指定 Blob、文件等对象的 URL。这个 API 的参数一般是一个 Blob 对象，它可以是一个 File 对象、MediaStream 对象等等。

使用 URL.createObjectURL() 的基本步骤如下：

1. 创建一个 Blob 对象或者其他可以作为参数的对象。
2. 调用 URL.createObjectURL(object) 方法，将此对象作为参数传入。
3. 得到返回的 URL，这个 URL 可以在需要时保存起来，比如赋值给一个标签的 href 属性。
4. 在使用完这个 URL 后，可以通过调用 URL.revokeObjectURL(url) 方法来释放对该 URL 的引用。

具体使用可以参考以下代码（假设 blob 对象已经创建好）：

// 创建 URL
var url = URL.createObjectURL(blob);

// 将 URL 赋值给链接并打开
var link = document.createElement('a');
link.href = url;
link.click();

// 释放 URL 引用
URL.revokeObjectURL(url);

相关问题

URL.createObjectURL 解析blob

### 使用 `URL.createObjectURL` 解析 Blob 数据

#### 创建对象 URL 并将其应用于页面元素

当需要处理文件上传或展示来自服务器的二进制数据时，可以利用 `URL.createObjectURL()` 来创建一个指向 `Blob` 或者 `File` 对象的临时 URL。此方法返回一个新的 DOMString 表示该对象的 URL 地址[^3]。

下面是一段简单的 JavaScript 代码片段展示了如何使用 `URL.createObjectURL()` 方法来解析并显示图像类型的 `blob` 数据：

// 假设有一个通过网络请求获取到的图片形式的 Blob 对象
const fetchImageAsBlob = async () => {
    const response = await fetch('https://example.com/image.png');
    return await response.blob();
};

fetchImageAsBlob().then((imageBlob) => {

    // 创建一个 img 元素
    let imgElement = document.createElement("img");

    // 获得 imageBlob 的 object URL
    let imageUrl = URL.createObjectURL(imageBlob);

    // 设置 img src 属性为新创建的对象 URL
    imgElement.src = imageUrl;

    // 添加至 body 中查看效果
    document.body.appendChild(imgElement);
});

这段脚本首先定义了一个异步函数用来从指定位置下载一张 PNG 图片作为 `Blob` 类型的数据；接着调用了 `URL.createObjectURL()` 函数传入刚刚获得的 `imageBlob` 参数得到其对应的 Object URL 字符串；最后把生成好的 URL 设定为目标 `<img>` 标签的源地址，并追加到文档主体内让用户可以看到加载出来的图形[^2]。

需要注意的是，在不再需要这些由 `createObjectURL()` 所产生的 URLs 后应当及时调用 `URL.revokeObjectURL()` 进行清理工作以节省内存资源。这通常发生在关联的 DOM 元素被移除之后立即执行[^1]。

URL.createObjectURL video MP4

### 创建 MP4 视频文件的对象 URL

为了创建一个指向 MP4 视频文件的对象 URL，可以使用 `URL.createObjectURL` 方法。此方法接收一个表示要关联资源的 `Blob` 或者 `File` 对象作为参数并返回一个新的对象 URL 字符串。

下面是一个简单的 JavaScript 函数来展示如何实现这一点：

function createVideoObjectUrl(fileInputId) {
    const fileInput = document.getElementById(fileInputId);
    const videoElement = document.querySelector('video');
    
    if (fileInput.files && fileInput.files.length > 0) {
        const mp4File = fileInput.files[0];
        
        // Create an object URL for the selected file.
        const objectUrl = URL.createObjectURL(mp4File)[^1];

        // Set this as the source of a <video> element on your page to play it back.
        videoElement.src = objectUrl;
    }
}

当不再需要该对象 URL 时，应该调用 `URL.revokeObjectURL()` 来释放内存中的引用。这可以通过监听视频加载完成事件或其他适当的时间点来进行处理[^1]。