vue 图片验证乱码 转为图片

要将图形验证码导出为图片，你可以使用Vue中的axios库发送POST请求获取验证码，并使用HTML5的<canvas>元素将其绘制为图像。

首先，确保你已经在Vue项目中安装了axios依赖。你可以使用以下命令进行安装：

npm install axios 

接下来，在你的Vue组件中，你可以使用以下代码发送POST请求获取验证码：

// 注册图片验证
export const imgAPI = (key) => {
  return request({
    method: 'POST',
    url: '/small4/verification/pic/get?key=' + key,
    responseType: 'arraybuffer' // 指定响应类型为arraybuffer
  })
}

// 获取图形验证码
    async imgAPI() {
      const res = await imgAPI(this.users.key)
      this.url = res.data
      const base64Image = btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
      this.url = base64Image
    },

上述代码中，我们将responseType设置为arraybuffer，以便获取响应数据的二进制表示。接着，我们使用btoa()函数将二进制数据转换为Base64编码的字符串。

一旦你有了Base64编码的图像数据base64Image，你可以将其用于显示图像或导出图像。以下是两种常见的方法：

1. 使用<img>元素显示图像：

<template> 
    <div> 
        <img :src="'data:image/jpeg;base64,' + base64Image" alt="验证码"> 
    </div> 
</template>

在这个示例中，我们将Base64编码的图像数据附加到src属性上，前缀为"data:image/jpeg;base64,"，表示这是一个Base64编码的JPEG图像。

1. 导出图像文件：

<img :src="'data:image/jpeg;base64,' + url" alt="验证码" @click="verify" />

在这个示例中，我们创建了一个带有download属性的<a>元素，将Base64编码的图像数据附加到href属性上，并将download属性设置为所需的文件名（例如："captcha.jpg"）。用户可以点击链接来下载图像。

请注意，此示例假设服务器响应的是JPEG格式的图像。如果服务器响应的是其他图像格式（如PNG），请相应地调整前缀和文件扩展名。