Vue拿到二進制流圖片怎么轉(zhuǎn)為正常圖片并顯示

這篇文章主要講解了“Vue拿到二進制流圖片怎么轉(zhuǎn)為正常圖片并顯示”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“Vue拿到二進制流圖片怎么轉(zhuǎn)為正常圖片并顯示”吧！

二進制流圖片轉(zhuǎn)為正常圖片并顯示

第一步

axios({
        method: 'get',
        url,
        responseType: 'arraybuffer' // 最為關(guān)鍵
      })
        .then(function (response) {
          that.src = 'data:image/jpeg;base64,' + that.arrayBufferToBase64(response.data)
        })

arrayBufferToBase64 (buffer) {
      var binary = ''
      var bytes = new Uint8Array(buffer)
      var len = bytes.byteLength
      for (var i = 0; i < len; i++) {
        binary += String.fromCharCode(bytes[i])
      }
      return window.btoa(binary)
    },

 <img :src="src" alt="驗證碼">

解析blob 二進制流圖片的展示

<el-image v-loading="loading" style='height: 480px;' :src="imgsrc"></el-image>

// /api/plan.js文件請求方法
export function getFlowPhoto(data) {
    return request({
        url: '/xxx/xxxx/getFlowPhoto',
        method: 'post',
        responseType: 'blob',
        data
    })
}

<script>
  import {getFlowPhoto} from "@/api/plan.js";
  export default {
    data() {
      return {
        imgsrc:'',
        loading:false,
      }
    },
    mounted() {},
    methods: {
      fetchData() {
        this.loading = true;
        var that = this;
        getFlowPhoto({id:xxx}).then((res) => {
          if(res.code == 401){
            this.$message({
              message: res.message,
              type: "error",
            });
          }
          if(res){
            const myBlob = new window.Blob([res], {type: 'image/jpeg'})
            const qrUrl = window.URL.createObjectURL(myBlob)
            this.imgsrc = qrUrl;
            this.loading = false;
          }
        });
      },
    }
  }
</script>

感謝各位的閱讀，以上就是“Vue拿到二進制流圖片怎么轉(zhuǎn)為正常圖片并顯示”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對Vue拿到二進制流圖片怎么轉(zhuǎn)為正常圖片并顯示這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！