Vue拿到二进制流图片如何转为正常图片并显示

二进制流图片转为正常图片并显示

第一步

axios({
    method: 'get',
    url,
    responseType: 'arraybuffer' // 最为关键
   })
    .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" 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>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持源码搜藏网。