接口返回的二維碼圖片,如何處理顯示(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