前端转换后台返回的不同图片流，显示图片

返回blob

axios请求header的responseType改为blob
export const getImg= (id: string) => {
  return http.request<Result>(
    "get",
    `/xxx/file/${id}`,
    {}
     { responseType: "blob" }
  );
};

调用该方法，使用blob来解析
const getImageInfo = fileId => {
  getImg(fileId).then(res => {
     let blob = new Blob([res?.data]);
    imgUrl.value = window.URL.createObjectURL(blob);
    srcList.value = [imgUrl.value];
  });
};

后端返回的格式为，图片的信息只能在header获取，而且该方法只能返回一个图片流


image.png

返回字节流

export const getImg= (id: string) => {
  return http.request<Result>(
    "get",
    `/xxx/file/${id}`,
  );
};

调用
const getImageInfo = fileId => {
  getStaticInfo(fileId).then(res => {
    imgUrl.value = 'data:image/png;base64,' + res.data.bytes
  });
};

返回的格式如下图，该方式可以在返回体中获取图片信息，并且可以返回多个图片资源

image.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容