后端blob 怎么显示在页面_关于js怎么解析后端传来的blob url地址
时间: 2024-02-24 10:56:49 浏览: 246
要在页面上显示后端传来的 Blob 数据,可以使用以下步骤:
1. 通过 AJAX 或 Fetch 请求获取 Blob 数据,注意设置请求头部的 Content-Type 为 "application/octet-stream",以便告诉服务器返回的是二进制数据。
2. 将 Blob 数据转换为 URL 地址,可以使用 URL.createObjectURL(blob) 方法。
3. 将 URL 地址赋给页面上的 img、audio、video 等标签的 src 属性,即可显示 Blob 数据。
以下是一个示例代码:
```javascript
fetch('/api/getBlobData', {
method: 'GET',
headers: {
'Content-Type': 'application/octet-stream'
}
})
.then(response => response.blob())
.then(blob => {
const url = URL.createObjectURL(blob);
const img = document.createElement('img');
img.src = url;
document.body.appendChild(img);
});
```
在上面的示例中,我们使用 Fetch 请求获取 Blob 数据,然后使用 URL.createObjectURL() 方法将其转换为 URL 地址,最后创建一个 img 元素并将 URL 赋给其 src 属性,以便在页面上显示图片。
阅读全文
相关推荐


















