技術標籤：vuevuejs

問題描述

前臺需要展示圖片，期望後臺直接返回圖片地址，但是後臺給的是的檔案流而不是一個圖片地址，需要把檔案流轉為base64的格式展示出來。

請求後臺介面時，返回圖片內容如下：

上圖不是base64格式，二十二進位制的檔案流資料，前端要想展示，只需要轉換資料格式為base64即可。

解決方法

1. 在獲取圖片介面中需要新增responseType:"arraybuffer"

  getVerifyCode({
    tel = '',
  }) { // 獲取圖形驗證碼
    return request({
      url: 'test/xxx/xxx'
 
,
      method: 'post',
      data: Object.assign({
        username: tel
      }, commonquery()),
      responseType: 'arraybuffer'
    })
  }, 

設定了 responseType: 'arraybuffer’後的介面返回：

2. 在需要的展示圖片的位置新增一個img標籤

 <img
            :src="verifyImg"
            @click="getVerify"
          /
 
>

3. base64轉換顯示
   對src繫結的verifyImg變數進行賦值處理

 getVerify() {
      inviteApi["getVerifyCode"]({
        tel: this.tel
      })
        .then(res => {
          const src =
            "data:image/png;base64," +
            btoa(
              new Uint8Array(res.data).reduce(
                (
 
data, byte) => data + String.fromCharCode(byte),
                ""
              )
            );
          this.verifyImg = src;
        })
        .catch(error => {
          console.log(error);
        });
    },

5. 最終展示在前端頁面的圖片如下圖所示
   
   參考：前端把圖片檔案流轉為base64格式展示在前端，顯示圖片