vue將文件流的形式的圖形驗證碼轉換成圖片

1.要實現的效果圖

　

2.調取接口，接口返回的數據形式

    

　或者

　打印返回結果為png圖像字符串數據

"�PNG\r\n\u001a\n\u0000\u0000\u0000\rIHDR\u0000\u0000\u0003 \u0000\u0000\u0002R\b\u0002\u0000\u0000\u0000��6A\u0000\u0000\u0000\u0006bKGD\u0000�\u0000�\u0000�����\u0000\u0000 \u0000IDATx���{xT���W x\u0000\u0006%$F�c F\t�\"�V��\u0000�P\u000f\b���xEъ��T�[email protected]� \u0018�諀`�TJ�Z\u0015\t�\"R��@\u000b|H�h8\u0005\......" 

　或者

　preview查看是張圖片

3.代碼實現　　　

　http.js文件中的post請求方法中的service的參數中添加responseType: 'arraybuffer'；

　 

　 在.vue文件中調取接口：

　　this.http.post(path).then((res) => {

　　　　// url 就是圖片地址，將url放置在標簽img的src屬性中，就可以在頁面中顯示圖形驗證碼

        　　let url = 'data:image/png;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''));

               this.imageBase64 = url

    　});

 　在html中：

    <img :src="imageBase64" />