前端使用blob展示二进制的图片

最新推荐文章于 2025-05-30 10:50:29 发布

地铁程序员

最新推荐文章于 2025-05-30 10:50:29 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

文章标签： ajax js java vue jquery

本文链接：https://blog.youkuaiyun.com/weixin_56071908/article/details/118172009

本文介绍了如何使用JavaScript的Ajax技术通过 XMLHttpRequest 获取远程服务器的二进制数据，并利用Blob对象进行本地展示。重点在于展示了如何设置响应类型为blob，并在接收到数据后正确解析和应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//DOM
var img = document.getElementById('img')
//Ajax
var xhr = new XMLHttpRequest()
// 设置返回类型为blob
xhr.responseType = "blob";
xhr.addEventListener('load',() => {
console.log(xhr.response);
var blob = xhr.response
// 给img赋值
img.src = window.URL.createObjectURL(blob)
})
//ajax的请求地址 方法
xhr.open('get','http://127.0.0.1:3000/v1/get/img',true)
xhr.send(null)

　　请求返回二进制数据