Vue拿到二進(jìn)制流圖片如何轉(zhuǎn)為正常圖片并顯示
二進(jì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="驗(yàn)證碼">
解析blob 二進(jìn)制流圖片的展示
<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>
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue中el-date-picker type=daterange日期清空時(shí)不回顯的解決
這篇文章主要介紹了vue中el-date-picker type=daterange日期清空時(shí)不回顯的解決方案,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-07-07vue+axios實(shí)現(xiàn)文件上傳的實(shí)時(shí)進(jìn)度條
最近用vue寫上傳的時(shí)候,遇到一個(gè)需求就是頁面上展示上傳的進(jìn)度條,之后寫過一次,但是用的是假交互,直接從0-100,今天分享一下用axios自帶的onUploadProgress來完成這個(gè)小需求,感興趣的朋友可以參考下2024-01-01解決Ant Design Modal內(nèi)嵌Form表單initialValue值不動(dòng)態(tài)更新問題
這篇文章主要介紹了解決Ant Design Modal內(nèi)嵌Form表單initialValue值不動(dòng)態(tài)更新問題,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10Vue項(xiàng)目實(shí)現(xiàn)換膚功能的一種方案分析
這篇文章主要介紹了Vue項(xiàng)目實(shí)現(xiàn)換膚功能的一種方案分析,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08vue實(shí)現(xiàn)高德地圖添加多個(gè)點(diǎn)標(biāo)記
地圖多點(diǎn)標(biāo)注其實(shí)是個(gè)非常簡單的問題,這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)高德地圖添加多個(gè)點(diǎn)標(biāo)記的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06Vue.js每天必學(xué)之指令系統(tǒng)與自定義指令
Vue.js每天必學(xué)之指令系統(tǒng)與自定義指令,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-09-09Vue.js + Nuxt.js 項(xiàng)目中使用 Vee-validate 表單校驗(yàn)
vee-validate 是為 Vue.js 量身打造的表單校驗(yàn)框架,允許您校驗(yàn)輸入的內(nèi)容并顯示對應(yīng)的錯(cuò)誤提示信息。這篇文章給大家?guī)砹薞ue.js 使用 Vee-validate 實(shí)現(xiàn)表單校驗(yàn)的相關(guān)知識(shí),感興趣的朋友一起看看吧2019-04-04