1、 什么叫图片流?

image.png

image.png

image.png

如图所示 接口返回就是一张图 那么问题来了 我们如何渲染?

2、axios封装 get接口传请求头

image.png

export const downloader = async (
  url: string,
  resOpts: AxiosRequestConfig,
): Promise<AxiosResponse<any>> => {
  const { method = 'get', data = '' } = resOpts;
  const userStore = useUserStore();
  const queryArgs = {
    url,
    method,
    data,
    headers: {
      [userStore.tokenHeader]: userStore.token,
    },
  };
  return downFile.request(queryArgs);
};

3、 使用封装好的axios

image.png

4、使用Blob 解码

async function fetchSensitiveDocuments(text: string, type: string) {
  console.log(text, 'text');
  const params: any = {};
  if (text.indexOf('/image/') == 0) {
    params.fileName = text.substring(7);
  } else {
    params.fileName = text;
  }
  const resp = await CompanyService.getPrivateFile(params);

  //type 类型看接口返回,返回正确就取接口类型,否则自定义
  var blob = new Blob([resp.data], { type: 'image/png' }), 

    url = URL.createObjectURL(blob), //Blob:xxxxx.com 
    img = new Image(); //img 标签
  window.open(url);
}
最后修改:2022 年 04 月 29 日 05 : 27 PM
如果觉得我的文章对你有用,请随意赞赏