Vue3中POST请求返回二进制图片转Blob显示失败排查

你的代码核心问题是没有指定请求的响应类型，导致HTTP客户端默认将二进制数据解析为文本/JSON，破坏了图片的原始二进制结构，最终生成的Blob无法正常渲染为图片。

关键修正步骤 #

• 在POST请求中添加responseType配置，明确告诉客户端以二进制格式接收数据。根据常用的HTTP客户端（如Axios），可设置为'blob'或'arraybuffer'：

修正后的代码示例 #

// 假设api是Axios实例，添加responseType配置
api.post('my api server here ', { url: e }, {
  responseType: 'blob' // 直接接收Blob类型，无需手动转换
})
.then(response => {
  try {
    if (response.data) {
      // 此时response.data已经是Blob对象，直接生成URL即可
      const imageUrl = URL.createObjectURL(response.data);
      // 将imageUrl绑定到Vue的响应式变量，用于页面显示，比如：
      // this.imageUrl = imageUrl;
    } else {
      console.error('API响应数据为空');
    }
  } catch (error) {
    console.error('生成Blob失败:', error);
  }
})
.catch(error => {
  console.error('API请求失败:', error);
});

其他排查点 #

• 确认服务器返回的Content-Type响应头为image/png，如果类型不匹配，可在创建Blob时手动指定正确的MIME类型（比如服务器返回application/octet-stream时，仍需设置{ type: 'image/png' }）。
• 若使用arraybuffer作为响应类型，需手动转换为Blob：

  const blob = new Blob([response.data], { type: 'image/png' });
  const imageUrl = URL.createObjectURL(blob);
  

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