获取后端返回的图形验证码
·
如果后端返回的直接就是一个图形,有以下几种方式展示

一、直接在img标签里面的src里面调用接口
<img :src="dialogSrc" class="photo" alt="验证码图片" @click="changeDialog">
let orgUrl = "/api/captcha" //你的接口地址
let dialogSrc = ref(orgUrl); //为啥不直接用orgUrl,是因为下面那个方法加上一个随机数
//点击图片刷新验证码
const changeDialog = () => {
dialogSrc.value = `${orgUrl}?${Math.random()}`
}
二、把二进制流转换为图片
<img
id="kaptcha_img"
src=""
alt="验证码图片"
class="photo"
@click="getKaptcha"
/>
getKaptcha().then((res) => { //接口地址返回
let kaptcha_img = document.getElementById("kaptcha_img");
let imageType = res.headers["content-type"]; //获取图片的格式
const blob = new Blob([res.data], { type: imageType });
const imageUrl = URL.createObjectURL(blob);
kaptcha_img.src = imageUrl;
kaptcha_img.onload = () => {
URL.revokeObjectURL(imageUrl); //释放URL.createObjectURL()创建的对象
};
});
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐


所有评论(0)