后端返回二进制流图片数据在前端展示
后端返回二进制流图片数据在前端展示
const { ok, data } = await $axios.get($urls.opcenter.teacher.getImg, {
params: {
ca_id: record.ca_id,
},
responseType: 'blob',
})if (ok) {
const promise = new Response(data).text()
promise.then(text => {
console.log('text: ', text)
let result try {
result = JSON.parse(text)
console.log('result: ', result)
} catch (e) { try {
const url = window.URL.createObjectURL(data)
$confirm({
title: '签到二维码',
icon: 'none',
content: h => ( <div>
<img src={url} alt="签到二维码" />{' '}
</div> ),
})
} catch (e) {
$message.error('二维码生成失败')
}
} if (result && result.code) {
$message.error(result.msg)
}
})
}
注意：responseType 默认返回数据类型是 json，将其改为返回数据类型 blob。
参考链接：https://www.jianshu.com/p/12fea9987c2d
来源https://www.cnblogs.com/ziyoublog/p/15083529.html