axios请求后端返回验证码图片，前端vue显示验证码图片

原文链接 https://blog.csdn.net/weixin_45817240/article/details/111589847用axios请求后端接口，得到验证码图片，但前端无法直接显示验证码图片，这是因为后端返回的不是一个json字符串，而是一个文件流格式，需要前端转换成base64编码。发送请求的接口：export function GetCaptcha (data) {return

夏日米米茶

4222人浏览 · 2021-03-31 16:39:56

夏日米米茶 · 2021-03-31 16:39:56 发布

原文链接 https://blog.csdn.net/weixin_45817240/article/details/111589847

用axios请求后端接口，得到验证码图片，但前端无法直接显示验证码图片，这是因为后端返回的不是一个json字符串，而是一个文件流格式，需要前端转换成base64编码。

发送请求的接口：

export function GetCaptcha (data) {
    return Axios对象({
        url: '后端请求接口地址',
        method: 'post',
        data: data,
        responseType: 'arraybuffer' //这里特殊注明返回格式是文件流
    });
}

前端获取后端返回值

getCaptcha() {
    const params = {}
    GetCaptcha(params).then(res => {
    	// btoa 创建一个 base-64 编码的字符串
    	// Uint8Array 创建8位无符号整型数组
    	// fromCharCode 将 Unicode 编码转为一个字符
        const img = btoa(
            new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), '')
        )
        this.captchaUrl = 'data:image/png;base64,' + img
    })
}