URL.createObjectURL 解析blob
时间: 2025-01-08 18:08:39 浏览: 8
### 使用 `URL.createObjectURL` 解析 Blob 数据
#### 创建对象 URL 并将其应用于页面元素
当需要处理文件上传或展示来自服务器的二进制数据时,可以利用 `URL.createObjectURL()` 来创建一个指向 `Blob` 或者 `File` 对象的临时 URL。此方法返回一个新的 DOMString 表示该对象的 URL 地址[^3]。
下面是一段简单的 JavaScript 代码片段展示了如何使用 `URL.createObjectURL()` 方法来解析并显示图像类型的 `blob` 数据:
```javascript
// 假设有一个通过网络请求获取到的图片形式的 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]。
阅读全文