请求二进制数据和base64格式数据的预览显示

最新推荐文章于 2024-03-13 20:27:37 发布

屋昂仼

最新推荐文章于 2024-03-13 20:27:37 发布

阅读量327

点赞数

分类专栏： vue 文章标签：前端二进制流

本文链接：https://blog.csdn.net/jmszl1991/article/details/125482409

版权

vue 专栏收录该内容

35 篇文章 1 订阅

订阅专栏

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);
});