无需设置responseType，如何用Axios获取并展示服务器图片？

你的代码无法生成正确图片的核心原因是：axios默认会把响应内容按UTF-8编码解析为字符串，而图片属于二进制数据，这个解析过程会丢失或篡改关键字节，导致后续转成Blob后无法还原原始图片。

另外你代码里的application/oclet-stream是拼写错误，正确的MIME类型应该是application/octet-stream，不过这不是主要问题。

解决办法 #

如果你坚持不想设置responseType: blob/arrayBuffer/stream，可以通过原生XMLHttpRequest绕过axios的自动编码解析：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://xxx/myapi');
// 设置响应类型为文本，但强制用自定义编码避免UTF-8转换损坏二进制数据
xhr.responseType = 'text';
xhr.overrideMimeType('application/octet-stream; charset=x-user-defined');

xhr.onload = function() {
  if (xhr.status !== 200) return;
  
  // 将二进制字符串转换为Uint8Array
  const byteArray = new Uint8Array(xhr.response.length);
  for (let i = 0; i < xhr.response.length; i++) {
    byteArray[i] = xhr.response.charCodeAt(i) & 0xFF;
  }
  
  // 生成Blob时请替换为实际的图片MIME类型（比如image/png、image/jpeg）
  const blob = new Blob([byteArray], { type: 'image/jpeg' });
  const fileURL = URL.createObjectURL(blob);
  
  const img = document.createElement('img');
  img.src = fileURL;
  document.body.appendChild(img);
};

xhr.send();

为什么这个方法有效？ #

通过overrideMimeType强制XHR把响应视为二进制字符串，避免默认的UTF-8编码转换，这样就能完整保留图片的原始字节，再转成Uint8Array后生成的Blob就是正确的图片数据。

补充说明 #

如果没有特殊限制，最简洁可靠的方式还是使用axios的responseType: 'blob'，代码会更简洁：

axios.get('https://xxx/myapi', { responseType: 'blob' }).then(response => {
  const fileURL = URL.createObjectURL(response.data);
  const img = document.createElement('img');
  img.src = fileURL;
  document.body.appendChild(img);
});

毕竟这是axios专门为处理二进制数据设计的参数，比绕路的原生XHR方案更易维护。

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