uniapp:图片验证码检验问题处理

  • 图形验证码功能实现

uniapp:解决图形验证码问题及利用arraybuffer二进制转base64格式图片(后端传的图片数据形式:x00\x10JFIF\x00\x01\x02\x00…)_❆VE❆的博客-CSDN博客

  • UI稿:

uniapp:图片验证码检验问题处理_第1张图片

  •  需求:向后端请求验证码图片,然后用户输入图片验证码之后,在校验通过之后才执行后面的逻辑
  • 难点:如何通过前端input框输入的值,即时与后端返回的图片进行校验
  • 解析:我们前端对这种自己输入的值以及后端传的图片验证码是无法比较的,一个使图片的格式,一个使数字/字符串类型,如何解决呢
  • 解决方法想到两个点,与后端商量,利用cookic解决,但是我们测试了下,没有拿到cookic值,具体原因我们也没找到;第二个方法就是他自定义了一个md5加密放到了响应头中,我拿到这个md5对应的值之后,在检验的请求中将其写待到请求头中,从而也因为它给我们前后端加了一个检验的桥梁,因而实现了图片验证码的校验。
  • 代码逻辑

uniapp:图片验证码检验问题处理_第2张图片

uniapp:图片验证码检验问题处理_第3张图片

  • 查看请求

 uniapp:图片验证码检验问题处理_第4张图片

  • 实现的效果图:校验成功

 uniapp:图片验证码检验问题处理_第5张图片

你可能感兴趣的:(uni-app,图形验证码校验,md5)