接口返回的二维码图片,如何处理显示(axios处理后台返回图片流格式数据)


问题描述: 调用后端接口,直接返回的是二维码图片,打印显示为乱码,前端如何处理数据后显示到img标签中

 

解决:

1.先设置axios接收参数格式为"arraybuffer"。responseType: 'arraybuffer'

2.转换为base64格式图片数据在img标签显示

axios.get(url地址, {
                responseType: 'arraybuffer',
                headers: {
                    'Authorization':localStorage.getItem('access_token') || ''
                }
            })
            .then(response => {
                return 'data:image/png;base64,' + btoa(
                new Uint8Array(response.data)
                    .reduce((data, byte) => data + String.fromCharCode(byte), '')
                );
            }).then(data => {
                this.qrcode = data
            })  

  然后把返回的数据放在img标签的src显示


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM