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

这篇文章主要讲解了“Vue拿到二进制流图片怎么转为正常图片并显示”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“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" 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     }) }

 <ｓｃｒｉｐｔ>   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;           }         });       },     }   } </ｓｃｒｉｐｔ>