axios获取后端返回的二进制验证码图片或者图片对象

发表于：2024-07-20 17:33:39浏览：2184次TAG： #axios #二进制图片 #图片对象

在开发 Web 应用程序时，我们经常需要与后端的接口进行数据交互。其中，接收文件流是一个常见的需求，比如本文提到的接收图片文件流。下面将介绍如何使用 Axios 在前端接收图片文件流的方案。

1、axios 中获取二进制图片
在网络请求中，responseType: “arraybuffer” 是指定服务器响应的数据类型为二进制数据缓冲区（ArrayBuffer）。这是XMLHttpRequest（XHR）和Fetch API等客户端JavaScript API中的一个选项。
当设置responseType: “arraybuffer”时，你告诉浏览器在接收到服务器响应后，将数据以二进制数组的形式存储在一个ArrayBuffer对象中。这对于处理诸如图像、音频、视频等二进制数据非常有用。

使用这个选项可以更有效地处理二进制数据，而不必将其转换为文本或其他格式。这在一些应用中很重要，例如下载图像、音频或视频文件，或者进行与图像处理相关的操作。

以下是在axios中的简单示例，演示如何设置responseType: “arraybuffer”，假设二进制数据存在 res.data 中。

// 将二进制数据转换为 Base64
bufferToBase64 (buffer) {
  const binary = new Uint8Array(buffer);
  const base64 = btoa(String.fromCharCode.apply(null, binary));
  return 'data:image/jpeg;base64,' + base64;
},
// 获取二进制图片
async getCode () {
  this.axios({
      method: "post",
      url: "https://abc.com/captcha/get",
      responseType: 'arraybuffer', //添加这句至关重要！
      headers: {
        "content-type": "application/json",
      },
    }).then((res) => {
      console.log('res', res)
      if (res.data) {
        this.codeImgSrc = this.bufferToBase64(res.data)
      } else {
        this.$toast.fail("获取图片失败，请重试");
      }
    })
},

2、axios 中获取图片对象
a、在axios封装时，根据url判断将请求的响应格式改为’blob’格式，axios默认为json

// 请求拦截器
request.interceptors.request.use(
    (config) => {
        const tokenStr = sessionStorage.getItem("token");
        if (tokenStr) {
            config.headers.token = tokenStr;
        }
        // 判断url改变响应数据格式
        if (config.url === '/user/image_code') {
            config.responseType = 'blob'
        }
        return config; // 返回这个配置对象，如果没有返回，这个请求就不会发送出去
    },
    (error) => {
        return Promise.reject(error);
    }
)

b、在使用时

    async imageCode() {
      //接收后端接口返回
      const result = await getImageCode()
      //接收后转为blob对象  
      let blob = new Blob([result.data], {type: "image/png"});
      //转换为url对象
      let url = window.URL.createObjectURL(blob);
      this.imageUrl = url;
    },

栏目分类全部>