后端返回图片信息是二进制流文件,前端vue如何解析
背景:使用axios请求接口,返回的打印返回的数据,浏览器控制台显示乱码,而在preview里查看却是一张图片。这时候应该怎么处理?放弃axios,使用XMLHttpRequest()代码如下:html部分:<img :src="qrCodeSrc" />js部分:let qrCodeUrl = '' // 要请求的接口地址let xhr = new XMLHttpRequest()x
·
背景:
使用axios请求接口,返回的打印返回的数据,浏览器控制台显示乱码,而在preview里查看却是一张图片。
这时候应该怎么处理?
放弃axios,使用XMLHttpRequest()
代码如下:
html部分:
<img :src="qrCodeSrc" />
js部分:
let qrCodeUrl = '' // 要请求的接口地址
let xhr = new XMLHttpRequest()
xhr.open('GET', qrCodeUrl, true)
xhr.responseType = 'blob' // 关键的一步
xhr.setRequestHeader(
'Authorization',
window.sessionStorage.getItem('rearToken')
) // 设置token
let that = this
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 201) {
let blob = this.response
// 将blob转化为base64形式
let reader = new FileReader()
reader.readAsDataURL(blob)
reader.onloadend = function() {
let base64data = reader.result // 这里base64data就是请求到的图片的base64码
that.qrCodeSrc = base64data
}
}
}
}
xhr.send()
更多推荐
已为社区贡献9条内容
所有评论(0)