欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue拿到二進(jìn)制流圖片如何轉(zhuǎn)為正常圖片并顯示

 更新時(shí)間:2022年06月05日 15:05:42   作者:pretty_girls  
這篇文章主要介紹了Vue拿到二進(jìn)制流圖片如何轉(zhuǎn)為正常圖片并顯示,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(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文件請求方法
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)文章

最新評(píng)論