如何在不使用responseType的情况下将API返回结果转换为图片？

核心思路 #

BambooHR员工照片API返回的是二进制图片数据，出现乱码或转图失败，本质是响应数据被错误解析为文本格式。即便你认为API不支持responseType，也可以通过以下两种方式处理二进制数据生成图片。

方法一：强制axios以ArrayBuffer接收响应 #

优先尝试设置responseType: 'arraybuffer'，多数情况下是axios默认解析为文本导致乱码，而非API不支持该参数。修改后的代码如下：

axios.get(`https://api.bamboohr.com/api/gateway.php/tadigital/v1/employees/2223/photo/large`, {
  auth: {
    username: 'xxxxxxxxxxxxxxxxx',
    password: 'xxxxxxxxxxxxxxxxx'
  },
  responseType: 'arraybuffer' // 关键设置，直接接收二进制数据
}).then(resp => {
  // 从响应头获取图片类型，生成Blob对象
  const blob = new Blob([resp.data], { type: resp.headers['content-type'] });
  // 生成可直接用于img标签的临时URL
  const imageUrl = URL.createObjectURL(blob);
  
  // 示例：将URL赋值给页面img元素
  // document.getElementById('employee-photo').src = imageUrl;
  console.log(imageUrl);
}).catch(err => {
  console.error('获取照片失败:', err);
});

方法二：手动还原被错误编码的文本数据 #

如果方法一无效，说明响应已被axios自动转为UTF-8文本导致二进制损坏，可通过编码转换还原原始二进制：

axios.get(`https://api.bamboohr.com/api/gateway.php/tadigital/v1/employees/2223/photo/large`, {
  auth: {
    username: 'xxxxxxxxxxxxxxxxx',
    password: 'xxxxxxxxxxxxxxxxx'
  }
}).then(resp => {
  // 将乱码文本反向还原为二进制数据
  const decoder = new TextDecoder('iso-8859-1');
  const encoder = new TextEncoder();
  const binaryData = encoder.encode(decoder.decode(new Uint8Array(Buffer.from(resp.data, 'binary'))));
  
  // 生成Blob和图片URL
  const blob = new Blob([binaryData], { type: resp.headers['content-type'] });
  const imageUrl = URL.createObjectURL(blob);
  
  // 后续可将imageUrl用于图片展示
});

额外说明 #

1. 验证响应头：确认API返回的Content-Type为图片类型（如image/jpeg、image/png），若返回值异常，可手动指定Blob的type参数。
2. Base64转换需求：如果确实需要Base64格式，可通过FileReader读取Blob生成：

   const reader = new FileReader();
   reader.onload = function(e) {
     const base64Str = e.target.result;
     // 此处base64Str即为图片的Base64字符串
   };
   reader.readAsDataURL(blob);
   

内容的提问来源于stack exchange，提问作者user17320926