记一个前端项目问题-图片验证码

@记一个前端项目问题-图片验证码

#问题背景

项目需求，需要在前端显示一下四位字符验证码的图片，图片由后端生成，前端通过接口访问得到图片，显示到前端
前提：
1、后台接口传的图片在前端没有进行处理之前显示乱码（后台接口返回图片直接用文件流进行返回）

解决方法

1、引入bese64,js插件

import base64  from "base64-js"

2、将响应的数据类型调整为 responseType: ‘arraybuffer’

uni.request({
			    method: 'GET',
			    url: '获取图片接口地址',
			    responseType: 'arraybuffer',
			    complete: function complete(response) {
			        console.log("执行完成：",response)
			       const binaryData = new ArrayBuffer(response.data);
			       console.log(binaryData)
			       // Encode the binary data as Base64
			       _this.verification_code = 'data:image/png;base64,'+base64.fromByteArray(new Uint8Array(response.data));
			    }
			})

3、前端设置图片路径
下面展示一些 内联代码片。

// A code block
var foo = 'bar';

<image :src="verification_code"></image>