后端返回二进制流图片数据在前端展示

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