前端显示后端返回二进制流图片

1.axios请求

axios.get(`/bigdata/action/bpmnManager/viewBpmnImage?deployId=${this.props.match.params.bpmId}`, {
            responseType: "arraybuffer",
          }).then(res => {
            return 'data:image/png;base64,' + btoa(
                new Uint8Array(res.data)
                  .reduce((data, byte) => data + String.fromCharCode(byte), '')
              );
          })
          .then(data => {
        //    console.log(data);
            this.pic = data;
          })
          .catch(ex => {
            console.error(ex);
          });

2.iframe


3.XMLHttpRequest

var xmlRequest = new XMLHttpRequest();
xmlRequest.open("GET", 'https://nextstack.xyz/static/qrcode.png', true);  
xmlRequest.responseType = "blob";//这里是关键,它指明返回的数据的类型是二进制
xmlRequest.onreadystatechange = function(e) {  
    if (this.readyState == 4 && this.status == 200) {  
        console.log(this._response)
    }  
}  
xmlRequest.send(null);

axios参考链接
xmlRequest参考链接

你可能感兴趣的:(前端显示后端返回二进制流图片)