使用 URL.createObjectURL(blob) 来创建一个 URL,然后将这个 URL 赋值给元素的 src 属性展示图像,或者发送给服务器进行处理。
时间: 2024-11-01 19:02:37 浏览: 5
当你有一个 `Blob` 对象,`URL.createObjectURL(blob)` 方法可以将其转换为一个临时的、安全的 URL,这个 URL 可以直接指向存储在浏览器缓存中的数据。这种方式特别适合于在不涉及跨域的情况下,动态地加载或分享数据,比如图片、音频、视频等。
例如,如果你想在一个 `<img>` 标签中显示 Blob 中的图片,你可以这样做:
```javascript
const blob = ...; // 假设已经得到了一个 Blob 对象
const url = URL.createObjectURL(blob);
const imgElement = document.createElement('img');
imgElement.src = url;
document.body.appendChild(imgElement);
```
在这个例子中,`imgElement.src` 被设置为由 `createObjectURL` 生成的 URL,当页面刷新或关闭时,该 URL 将自动失效,释放对应资源。
如果你想要发送 Blob 到服务器,例如通过 `fetch` 或 `XMLHttpRequest`,你可以构造一个 POST 请求,附上创建的 URL 作为数据部分:
```javascript
fetch('/api/upload', {
method: 'POST',
headers: {
'Content-Type': 'application/octet-stream'
},
body: url // 传递 URL 替代原始 Blob 数据
}).then(response => response.json());
```
但是注意,发送的 URL 并不是 Blob 数据本身,而是指向它的引用,所以服务器需要能处理这种形式的数据请求,并且通常需要特殊配置。
阅读全文