目录二进制流图片转为正常图片并显示解析blob 二进制流图片的展示二进制流图片转为正常图片并显示 第一步 axiOS({ method: 'get',
第一步
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="验证码">
<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>
以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。
--结束END--
本文标题: Vue拿到二进制流图片如何转为正常图片并显示
本文链接: https://www.lsjlt.com/news/150543.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0