前端显示gif流文件,gif图验证码

1、前端界面展示效果图:gif动态图片
在这里插入图片描述
2、接口获取流文件
在这里插入图片描述
3、接口配置

export function getBlob(params){return request({url: '/session/generatorCode',method: 'get',params,catchAll:true,responseType:"arraybuffer"})
}

4、数据处理

getBlob({key:this.key}).then(res =>{const buffer = Buffer.from(res, 'base64');this.gifUrl = 'data:image/png;base64,' + buffer.toString('base64');
})

5、展示

 <img :src="gifUrl"  alt="GIF Image" />

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/86871.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux用户与组管理(02)(七)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 前言 一、批量创建 二、修改属性 三、密码设置 四、删除 总结 前言 今天学习的是上次剩余的用户组的内容&#xff0c;也是相对于刚学习Linux系统比较重要的部分&#x…

基于Java+SpringBoot+Vue前后端分离工厂车间管理系统设计和实现

博主介绍&#xff1a;✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专…

sql:SQL优化知识点记录(三)

&#xff08;1&#xff09;explain之select_type和table介绍 简单的查询类型是&#xff1a;simple 外层 primary&#xff0c;括号里subquery 用到了临时表&#xff1a;derived &#xff08;2&#xff09;explain之select_type介绍 trpe反映的结果与我们sql是否优化过&#xff…

Kotlin开发笔记:协程基础

Kotlin开发笔记&#xff1a;协程基础 导语 本章内容与书的第十五章相关&#xff0c;主要介绍与协程相关的知识。总的来说&#xff0c;本文将会介绍Kotlin中关于异步编程的内容&#xff0c;主要就是与协程有关。在Kotlin中协程是利用continuations数据结构构建的&#xff0c;用…

记Flask-Migrate迁移数据库失败的两个Bug——详解循环导入问题

文章目录 Flask-Migrate迁移数据库失败的两个Bug1、找不到数据库&#xff1a;Unknown database ***2、迁移后没有效果&#xff1a;No changes in schema detected. Flask-Migrate迁移数据库失败的两个Bug 1、找不到数据库&#xff1a;Unknown database ‘***’ 若还没有创建数…

【leetcode 力扣刷题】双指针///原地扩充线性表

双指针///原地扩充线性表 剑指 Offer 05. 替换空格定义一个新字符串扩充字符串&#xff0c;原地替换思考 剑指 Offer 05. 替换空格 题目链接&#xff1a;剑指 Offer 05. 替换空格 题目内容&#xff1a; 这是一道简单题&#xff0c;理解题意&#xff0c;就是将字符串s中的空格…

PPPoE vs 静态:网络中的最佳选择

在企业网络中&#xff0c;选择适合的网络连接方式对于网络性能和安全至关重要。今天我将和大家分享关于PPPoE和静态IP地址的知识&#xff0c;探讨它们在企业网络中的优劣和最佳选择。本文将为您提供详细的分析和解决方案&#xff0c;帮助您在选择网络连接方式时做出明智的决策。…

Linux 三剑客

grep grep主打的就是查找功能 &#xff0c;它能够在一个或者多个文件中搜索某一特定的字符模式。 grep的语法 grep [选项] 模式 文件名 先说选项&#xff1a; 1.选项 要么是正则要么是字符串 -c 列出共出现多少次 -i 忽略大小写 -n 在前面列出行号 -v …

高效便捷的法律咨询小程序的设计与实践

现如今&#xff0c;随着智能手机的普及和移动互联网的发展&#xff0c;小程序成为了一种新兴的应用形式。对于律师事务所来说&#xff0c;开发一款专属的法律咨询小程序&#xff0c;无疑可以为客户提供更加便捷和高效的服务。那么&#xff0c;对于初次接触小程序制作的新手来说…

js reverse实现数据的倒序

2023.8.25今天我学习了如何在数组顺序进行倒序排列&#xff0c;如&#xff1a; 原数组为&#xff1a; 我们只需要对数组使用reverse()方法 let demo [{id: 1, name: 一号},{id: 2, name: 二号},{id: 3, name: 三号},]demo.reverse()console.log(demo) 扩展&#xff1a; 当我…

软件工程(十四) 设计模式之结构型模式(二)

1、组合模式 简要说明 将对象组合成树形结构以表示“整体-部分”的层次结构,使得用户对单个对象和组合对象的使用具有一致性。 速记关键字 树形目录结构 类图如下 由类图其实可以看出,组合模式就是将具有父子关系的结构,组装形成一棵树,并且根据规范,树干节点和叶子节…

QNAP(威联通)NAS外远程访问指南,免费内网穿透工具的应用和配置指导——“cpolar内网穿透”

文章目录 前言1. 威联通安装cpolar内网穿透2. 内网穿透2.1 创建隧道2.2 测试公网远程访问 3. 配置固定二级子域名3.1 保留二级子域名3.2 配置二级子域名 4. 使用固定二级子域名远程访问 前言 购入威联通NAS后&#xff0c;很多用户对于如何在外在公网环境下的远程访问威联通NAS…