前端头像预览

1.直接用axios请求不加代理时显示跨域了，所以配置了一下代理

config.js

 '/img-Pre':{
          target: "http://aliyuncs.com", //地址
          changeOrigin: true,
          // 端口号为8888的时候，需要重写
          rewrite: (path) => path.replace(/^\/img-Pre/, "")
  }

2.请求写api

export function getRobotPreview(id:any) {
  return request({
      url: id,
      method: 'get',
      baseURL:'/img-Pre',
      responseType: 'arraybuffer',
  })
}

3.接收到的文件，在控制台上打印出来乱码了

当从网络请求中获取到二进制数据时，在浏览器开发者工具的网络面板中查看原始响应，可能会看到一些看起来很奇怪的字符和符号，这些实际上是二进制数据经过某种转换或编码后的形式，以便能够在文本环境中显示。例如，可能会看到类似以下的部分内容（如果以文本形式查看）：

4.处理数据

使用Uint8Array和btoa函数（适用于处理已经获取到的二进制数据数组）

• 基本原理
• Uint8Array是一种类型化数组，可以用来表示无符号 8 位整数的数组，它可以方便地处理二进制数据。btoa函数用于将一个字符串转换为 Base64 编码的字符串。通过将二进制数据转换为字符形式的字符串，再使用btoa进行编码。
• 示例代码

• // 假设res.data是包含图片二进制数据的对象（例如从网络请求获取）
  const base64String = btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''));

  并指定了数据类型为image/png

•  option.value.img = `data: image/png;base64,${btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))}`