1000字范文,内容丰富有趣,学习的好帮手!
1000字范文 > 360极速浏览器以及360安全浏览器在兼容模式下验证码图片显示不来 但是极速模式可以显

360极速浏览器以及360安全浏览器在兼容模式下验证码图片显示不来 但是极速模式可以显

时间:2022-04-23 15:28:42

相关推荐

360极速浏览器以及360安全浏览器在兼容模式下验证码图片显示不来 但是极速模式可以显

问题

最近遇到一个验证码出不来的问题,在360极速浏览器以及360安全浏览器在兼容模式下验证码图片显示不来,效果如下:

这个验证码的代码元素如下,是一张图片,由接口提供的一个图片链接,返回的是文件流。

原因

我找了一个其他网址,发现在360极速浏览器以及360安全浏览器在兼容模式下验证码图片可以显示出来

这个验证码的代码元素如下,是一张 base64 的图片

于是我猜想是不是360极速浏览器以及360安全浏览器在兼容模式下需要base64的图片才行,于是我将上面改成base64的尝试一下。

解决

有了上面的猜想方案,下面来实践一下

添加@/utils/blob.js文件

import axios from "axios";// blob二进制 to base64function blobToDataURI(blob, callback) {let reader = new FileReader();reader.onload = function (e) {callback(e.target.result);}reader.readAsDataURL(blob);}// blob 二进制转 base64export function blobToBase64(url, data, callback) {axios({method: "get",url, // 请求地址data, // 参数responseType: "blob", // 表明返回服务器返回的数据类型}).then(res => {let blob = new Blob([res.data], {type: "iamge/png" });console.log("blobToBase64---->", blob);blobToDataURI(blob, (res) => {console.log("res---->", res);callback(res);})}).catch(err => {console.log(err);});}

调用该方法:

// blob转base64import {blobToBase64 } from "@/utils/blob.js";blobToBase64(`/xxx/imgcode?r=${Math.random()}`, null, (res) => {this.codeSrc = res;})

改完之后,就可以了。

360极速浏览器以及360安全浏览器在兼容模式下验证码图片显示不来 但是极速模式可以显示?

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。