图片验证码处理

版权声明：原创的文章转载请注明出处，谢谢！ https://blog.csdn.net/weixin_41804429/article/details/84890975

有些业务场景，当用户多次操作失败之后会增加图片验证码的操作，那前端该如何处理呢？其实很简单，后端生成图片验证码，我们直接渲染就可以了，后端可以返回图片验证码的url链接，也可以直接返回图片文件，这里面有个坑，当后端直接返回图片的时候我们前端如何渲染呢？折腾了一会儿，网上也搜了各种方法多不是很好，其实很简单，直接把后端图片验证码接口的地址放到img标签的src里面，img控件会自动获取并解析资源。

那我们怎么实现点击图片图片验证码就会变化呢？后端图片验证码一般是通过一个随机数来生成的，我们传的值不同，生成的验证码就不同，所以我们可以把含随机数参数的接口地址放到img src里面，点击时重新更新下src值就可以了。相关代码如下：

//html
<img :src="picUrl" @click="changePicCode">
//js
var picUrl = 'http://www.xxxxxx.xxx/api/pic_code/?t=' +  Math.random().toString();
changePicCode() {
    this.picUrl = 'http:/www.xxxxxx.xxx/api/pic_code/?t=' +  Math.random().toString();
}

代码中t的值就是一个随机数，后端会根据它的值来生成图片验证码。