企业网站建设推广广州小程序开发外包

企业网站建设推广,广州小程序开发外包,大连建网站策划,沃尔玛网上商城是正品吗在js中,我们请求接口生成图形验证码的时候,返回的是一个文件流的格式,我们字使用img标签去渲染的时候进行转码。html部分代码div classinput-wrapper pic-code-wrapperdiv classpic-input-wrapperinputv-modelformD…在js中,我们请求接口生成图形验证码的时候,返回的是一个文件流的格式,我们字使用img标签去渲染的时候进行转码。html部分代码div classinput-wrapper pic-code-wrapper div classpic-input-wrapper input v-modelformData.imageCode typetext placeholder请输入验证码 classform-input pic-code-input maxlength4 / span v-ifformData.imageCode classinput-clear clickformData.imageCode ×/span /div div classpic-image clickrefreshImageCode img v-ifcaptchaImgSrc :srccaptchaImgSrc alt验证码 classcaptcha-img / span v-else classcode-placeholder点击获取/span /div /divjs部分代码:调用接口// 刷新图片验证码 async refreshImageCode() { // 模拟生成验证码 // const codes [3789, A3B4, C5D6, E7F8, G9H0]; const uuid this.imageCodeSrc || genUUID(16, 16); // this.imageCodeSrc Date.now().toString(); console.info(生成图像验证码UUID:, this.imageCodeUUID); apiRequest( imageCaptcha, { imageCodeUUID: this.imageCodeUUID ?t new Date().getTime() }, { encrypt: false, showLoading: true, //是否显示加载按钮 responseType: arraybuffer, //处理请求返回的数据类型 headers: {}, onSuccess: res { //接口返回成功处理数据 if (this.captchaImgSrc this.captchaImgSrc.startsWith(blob:)) { URL.revokeObjectURL(this.captchaImgSrc); } // 文件流(arraybuffer) 转 Blob 再转 blob URL 用于页面展示 let blob; if (res instanceof ArrayBuffer) { blob new Blob([res], { type: image/png }); } else if (res instanceof Blob) { blob res; } else { this.captchaImgSrc data:image/png;base64,${res.data}; this.imageCodeUUID uuid; return; } this.captchaImgSrc URL.createObjectURL(blob); this.imageCodeUUID uuid; }, onError: error { console.error(图像验证码生成失败:, error); } } ).catch(error { if (error error._handled true) { return; } console.error(图像验证码生成失败:, error); }); },注意事项确保服务端正确设置响应头Content-Type: image/png或对应图像格式对于大型图片考虑添加加载状态提示在Vue/Angular等框架中原理相同只需调整数据绑定方式测试时注意CORS问题确保接口允许前端域名访问这种方法适用于PNG/JPEG等格式的验证码如果是SVG格式可直接作为文本接收并注入到DOM中。