vue解析后端返回的二维码图片数据流

问题场景

  • 后端返回图片数据流,打印结果是乱码,如下:
    vue解析后端返回的二维码图片数据流_第1张图片
  • Chrome浏览器的preview中可以看到二维码(图片),如下:
    vue解析后端返回的二维码图片数据流_第2张图片
    解析思路
  1. 尝试用二进制大对象Blob解析,然后生成图片的URL,代码如下:
// QRCode 为后端接口返回的图片数据流
const blob = new Blob([QRCode])
const url = window.URL.createObjectURL(blob)
  1. 但是把生成的URL链入img的src后仍然显示不出来,在查资料后知道还需设置responseType为blob才行,代码如下:
const QRCode = await this.$swaggerApi.$post(
	url,  // 接口地址
 	params,  // 参数
 	{
      'responseType': 'blob' }
)
const blob = new Blob([QRCode])
const url = window.URL.createObjectURL(blob)

把生成的url链入img的src后效果如下:
vue解析后端返回的二维码图片数据流_第3张图片

你可能感兴趣的:(业务场景)