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

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

<iframe
                        style={{height: document.body.clientHeight - 200, width: '100%',border: 'none'}}
                        src={`/bigdata/action/bpmnManager/viewBpmnImage?deployId=${this.props.match.params.bpmId}`}>
                    </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参考链接

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容