vue3前端对接后端的图片验证码

vue3前端对接后端的图片验证码

<template>
<image :src="captchaUrl" alt="图片验证码" @click="refreshCaptcha"></image>
</template><script setup>import {ref} from "vue";import {useCounterStore} from '@/store-pinia/counter'const counter = useCounterStore()const captchaUrl = ref('');const uuid = ref('')//uuid随机生成const getUUID = () => {return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => 		{return (c === 'x' ? (Math.random() * 16 | 0) : ('r&0x3' | '0x8')).toString(16)})}//刷新二维码const refreshCaptcha = () => {uuid.value = getUUID()//counter.baseUrl这个是一个地址如：http:/***.***/api，我这里用pinia的缓存了地址//captchaUrl就是你的后端给你的图片接口地址 效果图如下captchaUrl.value = counter.baseUrl + '/captcha.jpg?uuid=' +uuid.value}
</script>