前端把圖片文件流轉為base64格式展示在前端，顯示圖片

1、需求：前台需要展示圖片，期望后台直接返回圖片地址，但是后台給的是的文件流而不是一個圖片地址，需要把文件流轉為base64的格式展示出來

 

 

 

2、在獲取圖片接口中需要添加responseType:"arraybuffer"

 

添加responseType之后獲取的數據如下圖

 

 

 

 

3、在需要的展示圖片的位置添加一個img標簽

 

 

 

 

4、對src綁定的fileField變量進行賦值處理

 

 

 

5、最終展示在前端頁面的圖片如下圖所示

 

 

 

 

 

6、所需代碼

// 圖片接口
export const getPicList = (params) => {
    return request({
        url: Vue.prototype.BASE_URL + '/examiner/showpic',
        method: 'get',
        params: { ...params },
        responseType: 'arraybuffer'
    })
}


//img標簽

  <img class="imgWH" :src="fileField" alt />

 

  

  //請求圖片接口並且對文件流進行處理

 let picParam = {

        filename: decodeURIComponent(row.bioinformaticsFilePath),

      };

      getPicList(picParam).then((res) => {

        var data = res.data;

        this.fileField =

          "data:image/png;base64," +

          btoa(

            new Uint8Array(data).reduce(

              (data, byte) => data + String.fromCharCode(byte),

              ""

            )

          );

      });