前端显示后端返回二进制流图片
2018-11-12 本文已影响187人
Ysj1111
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>