Vue拿到二進(jìn)制流圖片如何轉(zhuǎn)為正常圖片并顯示
更新時(shí)間：2022年06月05日 15:05:42 作者：pretty_girls
這篇文章主要介紹了Vue拿到二進(jìn)制流圖片如何轉(zhuǎn)為正常圖片并顯示，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
二進(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文件請(qǐng)求方法
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中七牛插件使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
Vuex如何獲取getter對(duì)象中的值(包括module中的getter)
這篇文章主要介紹了Vuex如何獲取getter對(duì)象中的值(包括module中的getter)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue from-validate 表單驗(yàn)證的示例代碼
本篇文章主要介紹了Vue from-validate 表單驗(yàn)證的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
vue如何使用formData傳遞文件類(lèi)型的數(shù)據(jù)
這篇文章主要介紹了vue如何使用formData傳遞文件類(lèi)型的數(shù)據(jù)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
Vue3 嵌套路由的使用和 Vue2 相差不大,主要的區(qū)別是 Vue3 的路由實(shí)例化使用了 createApp() 方法,所以實(shí)例化路由時(shí)需要傳入根組件,這篇文章主要介紹了vue3使用vue-router嵌套路由(多級(jí)路由),需要的朋友可以參考下2023-12-12
vue項(xiàng)目打包是我們?nèi)粘＝?jīng)常遇到的,下面這篇文章主要給大家介紹了關(guān)于Vue打包后不同版本詳細(xì)解析的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
vue 點(diǎn)擊按鈕實(shí)現(xiàn)動(dòng)態(tài)掛載子組件的方法
今天小編就為大家分享一篇vue 點(diǎn)擊按鈕實(shí)現(xiàn)動(dòng)態(tài)掛載子組件的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要介紹了搭建vue開(kāi)發(fā)環(huán)境的方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-07-07
這篇文章主要介紹了Vue中key的原理以及diff算法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
Vue2中實(shí)現(xiàn)雙擊事件的幾種常見(jiàn)方法
這篇文章主要介紹了Vue2中實(shí)現(xiàn)雙擊事件的幾種常見(jiàn)方法,Vue2中處理雙擊事件的方法包括使用@dblclick指令、addEventListener方法和第三方庫(kù),這些方法提供了靈活的解決方案,以滿(mǎn)足不同的需求,需要的朋友可以參考下2024-11-11