当前位置:网站首页>请求二进制数据和base64格式数据的预览显示
请求二进制数据和base64格式数据的预览显示
2022-07-05 22:19:00 【ws_code_csdn】
1、请求二进制数据,各种格式的数据预览显示。
axios({
method: 'get',
url: `getFile/${type}`,
headers: {
Authorization: userStore.token,
},
// 这里是必须的 'blob'
responseType: 'blob',
}).then((res: any) => {
// pdf 格式
if (type == 1) {
let blob = new Blob([res.data], { type: 'application/pdf' });
pdfSrc.value = URL.createObjectURL(blob);
window.open(pdfSrc.value);
} else if (type == 2) {
// 图片 jpeg格式
let blob = new Blob([res.data], { type: 'image/jpeg' });
imgSrc.value = window.URL.createObjectURL(blob);
} else if (type == 3) {
// 音频
let blob = new Blob([res.data], { type: 'wav/audio' });
if (audio.value) {
audio.value.src = window.URL.createObjectURL(blob);
audio.value.play();
}
} else if (type == 4) {
// 图片 excel格式
const link = document.createElement('a');
let blob = new Blob([res.data], { type: 'application/vnd.ms-excel' });
link.style.display = 'none';
link.href = URL.createObjectURL(blob); //创建一个指向该参数对象的URL
link.setAttribute('download', `表资源${new Date().getTime()}.xls`);
document.body.appendChild(link);
link.click(); //触发下载
document.body.removeChild(link);
}
});
注意点:
A、要把 responseType 设置为 ‘blob’;
B、要把对应的type设置好,比如图片 new Blob([res.data], { type: 'image/jpeg' })。
2、base64格式数据图片预览显示
getOperImg()
.then((res) => {
if (res) {
const { code, data } = res;
if (code == 200) {
if (Array.isArray(data) && data.length != 0) {
const { operPic } = data[0];
// operPic 就是请求来的base64图片数据
// 最终的图片地址 需要前边拼接 data:image/jpg;base64,
imgSrc.value = `data:image/jpg;base64,${operPic}`;
}
}
}
})
.catch((err) => {
console.log('获取图片', err);
});
边栏推荐
- Summary of concurrency control
- Interprocess communication in the "Chris Richardson microservice series" microservice architecture
- Oracle is sorted by creation time. If the creation time is empty, the record is placed last
- Microservice link risk analysis
- 数博会精彩回顾 | 彰显科研实力,中创算力荣获数字化影响力企业奖
- Performance monitoring of database tuning solutions
- The American Championship is about to start. Are you ready?
- Performance testing of software testing
- Shelved in TortoiseSVN- Shelve in TortoiseSVN?
- Create a virtual machine on VMware (system not installed)
猜你喜欢
AD637使用筆記
Implementation technology of recovery
航海日答题小程序之航海知识竞赛初赛
CA certificate trampled pit
Leetcode simple question: find the nearest point with the same X or Y coordinate
Daily question brushing record (XIV)
Storage optimization of performance tuning methodology
Database recovery strategy
MySQL服务莫名宕机的解决方案
A substring with a length of three and different characters in the leetcode simple question
随机推荐
Database tuning solution
Comment développer un plug - in d'applet
Overview of concurrency control
了解 Android Kotlin 中 DataStore 的基本概念以及为什么应该停止在 Android 中使用 SharedPreferences
The new content of the text component can be added through the tag_ Config set foreground and background colors
Implementing Lmax disruptor queue from scratch (IV) principle analysis of multithreaded producer multiproducersequencer
U盘的文件无法删除文件怎么办?Win11无法删除U盘文件解决教程
Pl/sql basic case
1.3 years of work experience, double non naked resignation agency face-to-face experience [already employed]
Matlab draws a cute fat doll
Draw a red lantern with MATLAB
等到产业互联网时代真正发展成熟,我们将会看待一系列的新产业巨头的出现
数据泄露怎么办?'华生·K'7招消灭安全威胁
Concurrency control of performance tuning methodology
A number of ventilator giants' products have been recalled recently, and the ventilator market is still in incremental competition
Advantages and disadvantages of the "Chris Richardson microservice series" microservice architecture
Decorator learning 01
Leetcode simple question: check whether each row and column contain all integers
Two stage locking protocol for concurrency control
Blocking protocol for concurrency control