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";//這里是關(guān)鍵，它指明返回的數(shù)據(jù)的類型是二進(jìn)制
xmlRequest.onreadystatechange = function(e) {  
    if (this.readyState == 4 && this.status == 200) {  
        console.log(this._response)
    }  
}  
xmlRequest.send(null);

axios參考鏈接
xmlRequest參考鏈接