这篇文章主要讲解了“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="验证码"><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>感谢各位的阅读，以上就是“Vue拿到二进制流图片怎么转为正常图片并显示”的内容了，经过本文的学习后，相信大家对Vue拿到二进制流图片怎么转为正常图片并显示这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
