移动端

uni-app 图片验证码

2022-07-28  本文已影响0人  泪滴在琴上
image.png

uniapp显示图片验证码
后台返回的是流文件的格式,查了很多,都是使用arrayBuffer接收,但是没有效果,所以直接使用下方代码。

<image :src="imgSrc" class="w_img" mode="" @click="getCode()"></image>

动态改变imgSrc触发验证码更新

mounted() {
            this.getCode()
 },
getRangeCode() {
                var orgStr = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
                let returnStr = ''
                for (var i = 0; i < 6; i++) {
                    returnStr += orgStr.charAt(Math.floor((Math.random() * orgStr.length)))
                }
                return returnStr
            },

增加时间戳+随机6位字符.

getCode() {
                this.codeKey = new Date().getTime() + this.getRangeCode()
                this.imgSrc = API_ROOT + '/v1/app/user/getCode?codeKey=' + this.codeKey
            },
上一篇 下一篇

猜你喜欢

热点阅读