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

返回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