Vue 讀取后台二進制文件流轉為圖片顯示

有一個項目需要從后台讀取文件流轉為圖片顯示到頁面上，傳回的文件是blob文件格式的，其實很簡單，稍作記錄。

http 請求是這個樣子的。

image/jpeg 格式的。

js代碼

       this.$http({
          url: '請求的接口',
          method: 'get',   // get請求，post改為post
          responseType: 'blob',
          params: {   // 這是提交的參數，如果是post 的就是 data
            id: '123456',
            index: 'img'
          }
        }).then(({ data }) => {
          let blob = new Blob([data]);   // 返回的文件流數據
          let url = window.URL.createObjectURL(blob);  // 將他轉化為路徑
          this.mapSrc = url  // 將轉換出來的路徑賦值給變量，其實和上一步結合就可以
          }
        })

到這里就拿到了blob流轉換成的文件路徑

html代碼

然后就簡單了，把這個轉換出來的路勁賦值到需要展示的 img標簽就可以了。

<img :src="mapSrc" alt="" style="width: 100%;">

這樣子圖片就顯示出來了。

然后每次請求返回的圖片流是一樣的，同一張圖片，但是轉換出來的路徑可能是不一樣的，但是只要請求的是同一張圖片的話，渲染出來的圖片是一樣的。就這樣。