1、 什么叫图片流?
如图所示 接口返回就是一张图 那么问题来了 我们如何渲染?
2、axios封装 get接口传请求头
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
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);
}