前端处理后端返回的二进制流文件

た入场券 2023-06-24 04:45 26阅读 0赞

### 1、前端处理后端返回的二进制流文件 ###

**注意**：如果后端接口返回的是二进制流数据，在发送请求时需要设置responseType=‘blob’，否则收到的数据将是乱码。

### 2、前端处理后端返回的二进制流乱码图片 ###

var xhr = new XMLHttpRequest();   
    xhr.open("get", "/verify", true);
    xhr.responseType = "arraybuffer";  //重点：设置接收类型
    xhr.onload = function() {
        if (this.status == 200) {
        	let img = document.getElementById("img");
        	let imgBase = btoa(new Uint8Array(response.data).reduce((data, byte) => data +String.fromCharCode(byte),'')); //将返回数据转为为base64
    		img.src = 'data:image/jpg|png;base64,' + imgBase
        }
    }
    xhr.send();

### 拓展 ###

URL.createObjectURL(obj) 方法会创建一个 DOMString，这个 URL 的生命周期和创建它的窗口中的 document 绑定。

**语法**：URL.createObjectURL(obj)

参数说明：obj为 File 对象、Blob 对象或者 MediaSource 对象。

使用完后，最好调用URL.revokeObjectURL() 释放内存；如果不主动释放内存，浏览器会在页面退出时自动释放。