当前位置:网站首页>Request preview display of binary data and Base64 format data
Request preview display of binary data and Base64 format data
2022-07-05 22:26:00 【ws_ code_ csdn】
1、 Request binary data , Preview display of data in various formats .
axios({
method: 'get',
url: `getFile/${type}`,
headers: {
Authorization: userStore.token,
},
// It's necessary here 'blob'
responseType: 'blob',
}).then((res: any) => {
// pdf Format
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) {
// picture jpeg Format
let blob = new Blob([res.data], { type: 'image/jpeg' });
imgSrc.value = window.URL.createObjectURL(blob);
} else if (type == 3) {
// Audio
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) {
// picture excel Format
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); // Create a URL
link.setAttribute('download', ` Table resources ${new Date().getTime()}.xls`);
document.body.appendChild(link);
link.click(); // Trigger download
document.body.removeChild(link);
}
});
Be careful :
A、 To put responseType Set to ‘blob’;
B、 The corresponding type Set it up , Such as the picture new Blob([res.data], { type: 'image/jpeg' }).
2、base64 Format data picture preview display
getOperImg()
.then((res) => {
if (res) {
const { code, data } = res;
if (code == 200) {
if (Array.isArray(data) && data.length != 0) {
const { operPic } = data[0];
// operPic It's a request base64 Picture data
// The final picture address Requires front stitching data:image/jpg;base64,
imgSrc.value = `data:image/jpg;base64,${operPic}`;
}
}
}
})
.catch((err) => {
console.log(' Get photo ', err);
});
边栏推荐
- Server optimization of performance tuning methodology
- Distance entre les points et les lignes
- Database recovery strategy
- 记录几个常见问题(202207)
- Sparse array [matrix]
- Metaverse Ape上线倒计时,推荐活动火爆进行
- 119. Pascal‘s Triangle II. Sol
- Postman core function analysis - parameterization and test report
- Granularity of blocking of concurrency control
- Assign the output of a command to a variable [repeat] - assigning the output of a command to a variable [duplicate]
猜你喜欢
"Chris Richardson microservices series" uses API gateway to build microservices
Technology cloud report won the special contribution award for the 10th anniversary of 2013-2022 of the "cloud Ding Award" of the global cloud computing conference
The countdown to the launch of metaverse ape is hot
Practice: fabric user certificate revocation operation process
Sentinel production environment practice (I)
Leetcode simple question check whether all characters appear the same number of times
Leetcode simple question: the minimum cost of buying candy at a discount
A substring with a length of three and different characters in the leetcode simple question
Advantages and disadvantages of the "Chris Richardson microservice series" microservice architecture
Distance entre les points et les lignes
随机推荐
Qtquick3d real time reflection
[groovy] groovy dynamic language features (automatic type inference of function arguments in groovy | precautions for function dynamic parameters)
Official clarification statement of Jihu company
Advantages and disadvantages of the "Chris Richardson microservice series" microservice architecture
Concurrency control of performance tuning methodology
"Chris Richardson microservices series" uses API gateway to build microservices
Interprocess communication in the "Chris Richardson microservice series" microservice architecture
[error record] file search strategy in groovy project (src/main/groovy/script.groovy needs to be used in the main function | groovy script directly uses the relative path of code)
科技云报道:算力网络,还需跨越几道坎?
database mirroring
2022-07-05: given an array, you want to query the maximum value in any range at any time. If it is only established according to the initial array and has not been modified in the future, the RMQ meth
Technology cloud report won the special contribution award for the 10th anniversary of 2013-2022 of the "cloud Ding Award" of the global cloud computing conference
Kubernetes Administrator certification (CKA) exam notes (IV)
How to create a thread
What changes has Web3 brought to the Internet?
IIC bus realizes client device
[groovy] mop meta object protocol and meta programming (execute groovy methods through metamethod invoke)
119. Pascal‘s Triangle II. Sol
Meituan dynamic thread pool practice ideas, open source
[agc009e] eternal average - conclusion, DP