js接收二进制流显示图像

 

var xmlhttp;
xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET","http://10.10.0.62:10001/api/charge/admin/v1/image/code",true);
xmlhttp.responseType = "blob";
xmlhttp.onload = function(){
    console.log(this);
    if (this.status == 200) {
        var blob = this.response;
        var img = document.createElement("img");
        img.onload = function(e) {
            window.URL.revokeObjectURL(img.src); 
        };
        img.src = window.URL.createObjectURL(blob);
        document.body.appendChild(img); 
    }
}
xmlhttp.send();

 

福建C# .net  技术群

转载于:https://www.cnblogs.com/annkiny/p/8376976.html

### 前端接收并处理二进制文件流 在前端开发中,当需要接收来自后端的二进制文件流时,通常通过 HTTP 请求工具(如 Axios)来获取数据,并根据实际需求对其进行进一步处理。以下是具体的操作流程以及注意事项。 #### 1. 设置请求头以接收二进制数据 为了正确接收二进制文件流,在发起请求前需显式声明响应类型为 `blob` 或 `arraybuffer`。这一步骤非常重要,因为默认情况下,Axios 和其他类似的库会尝试将接收到的内容解析为 JSON 字符串或其他文本形式[^1]。 ```javascript axios({ url: 'https://example.com/api/file', method: 'GET', responseType: 'blob', // 明确告知服务端返回的是二进制大对象(BLOB) }).then((response) => { handleBinaryData(response.data); }); ``` 此处设置了 `responseType: 'blob'` 参数,意味着无论服务器发送什么类型的资源——无论是图片、文档还是视频片段等多媒体资料,都会被当作一块未加工过的字节序列对待。 #### 2. 处理接收到的 BLOB 数据 一旦成功捕获到了目标文件的原始比特表示形式之后,就可以依据业务逻辑采取不同的行动方案了。例如直接嵌入页面显示媒体内容或者触发浏览器自动下载机制等等[^2]。 ##### A. 自动触发文件下载行为 如果目的是让用户能够方便快捷地保存远程存储上的某些重要档案副本至本地磁盘当中,则可通过创建临时超链接节点的方式轻松达成目的: ```javascript function downloadBlobAsFile(blobContent, suggestedFileName='defaultName.ext') { const blobInstance = new Blob([blobContent], {type : 'application/octet-stream'}); const anchorElement = document.createElement('a'); if(window.navigator.msSaveOrOpenBlob){ // IE/Edge 特定语法 navigator.msSaveBlob(blobInstance ,suggestedFileName ); } else{ const objectUrlForDownload = URL.createObjectURL(blobInstance); anchorElement.href=objectUrlForDownload ; anchorElement.download=suggestedFileName ; document.body.appendChild(anchorElement); anchorElement.click(); document.body.removeChild(anchorElement); setTimeout(() =>{URL.revokeObjectURL(objectUrlForDownload );},0);// 清理内存泄漏风险 } } ``` 上述代码片段展示了如何跨主流现代浏览器安全有效地实施这一功能[^2]。 ##### B. 动态加载在线预览素材 除了单纯提供离线拷贝选项之外,有时我们也希望能够即时渲染这些外部资产供访问者浏览体验。针对这种情况下的解决方案取决于具体的 MIME 类型分类标准: - 对于图像类别的实例可以直接赋值给 `<img>` 标签 src 属性; - 如果涉及音频或视屏播放则分别关联对应的 HTML5 Media Elements (`<audio>`, `<video>`); - 至于 Office 文档之类的复杂情况可能还需要借助第三方插件才能实现无缝集成效果[^3]。 ```html <!-- 图片示例 --> <img id="previewImage"/> <script> var imgTag=document.getElementById("previewImage"); imgTag.src=window.URL.createObjectURL(new Blob(["..."],{"type":"image/png"})); </script> <!-- 视频示例 --> <video controls autoplay width="640" height="360"> <source id="vidSource"/> Your browser does not support the video tag. </video> <script> document.querySelector("#vidSource").src= window.URL.createObjectURL( new Blob(["..."],["type":"video/mp4"]) ); </script> ``` 以上仅列举了几种常见情形下的应用示范而已,实际上还有更多可能性等待探索发现! --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值