正文

vue中实现文件流格式图片预览(代码片段)

明天也要努力  明天也要努力  2023-01-12  473

关键词：

需求：后端接口返回文档流格式图片，如何在页面中显示显示并预览？

思路：

设置 axios responseType: ‘blob’；传送门：JavaScript Blob 对象详解
URL.createObjectURL() 创建一个 DOMString，包含一个表示参数中给出的对象的 URL；
通过 Element-ui 中的图片组件（Image）实现预览；

完整代码：

<template>
  <div class="home">
    <el-image 
      style="width: 200px; height: 200px"
      :src="imgUrl" 
      :preview-src-list="srcList">
    </el-image>
  </div>
</template>

<script>
import axios from 'axios';
export default 
  data()
    return
      imgUrl:'', 
      srcList: []
    
  ,
  methods:
    loadFile() 
      axios(
        method: 'get',
        url: '/api/file/download/123456',
        responseType: 'blob',
        params: ,
        headers: 
          Accept: 'application/octet-stream',   
          token: myToken,   // 获取token，这里假定 myToken
        ,
      ).then(res => 
        let blob = new Blob([res.data], type: 'image/jpeg');
        const imageUrl = URL.createObjectURL(blob);
        this.imgUrl = imageUrl;
        this.srcList.push(imageUrl);
      ).catch(err => 
        console.log('导出失败')
      )
    ,
  ,
  mounted()
    this.loadFile();
  

</script>

拓展：

URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的 URL。
这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。

Note: 此特性在 Web Worker 中可用；
注意： 此特性在 Service Worker 中不可用，因为它有可能导致内存泄漏；

语法：objectURL = URL.createObjectURL(object);
参数：object  用于创建 URL 的 File 对象、Blob 对象或者 MediaSource 对象；
返回值：一个DOMString包含了一个对象URL，该URL可用于指定源 object的内容。

相关链接：Vue中实现文件流下载

vue中实现在线预览pdf文件(代码片段)

方法1：使用插件pdfObject（Safari不能正常显示，安卓手机的支持也不好）npmipdfobject-Smain.jsVue.prototype.$PDFObject=PDFObject; <divid="example1"style="height:600px;width:80%;margin:0auto"></div>mounted()let_th 查看详情

vue中实现在线预览pdf文件(代码片段)

javaio流中实现文件复制(代码片段)

importjava.io.FileInputStream;importjava.io.FileNotFoundException;importjava.io.FileOutputStream;importjava.io.IOException;publicclassFileCopypublicstaticvoidmain(String[]args)FileInputStreamfis= 查看详情

vue项目中实现图片懒加载的方法(代码片段)

对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载，等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升，也提高了用户体验。实现方... 查看详情

vue项目中实现图片懒加载的方法(代码片段)

对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载，等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升，也提高了用... 查看详情

图片上传预览(代码片段)

图片上传预览方法：//上传图片functionimgFileFunc(source)//文件流varfile=source.files[0];varfileType=file.typevardom1=‘.files_img1‘//判断上传的文件格式if(fileType.indexOf(‘image/‘)<0)//以下代码是对如果不是这种格式的代码进行处理$(‘#tipCont‘).... 查看详情

vue+elementui实现点击图片预览大图和预览视频(代码片段)

...点击图片预览大图和预览视频最近遇到一个需求:在表格中实现预览图片和查看视频预览图片功能:如下,是材料一栏的代码<el-table-columnprop="filesLoc"label="材料"><templateslot-scope="scope"><el-buttonv-if&#... 查看详情

vuevue-cli3构建项目中实现图片懒加载(代码片段)

前两天正好写了文章如何用实现图片懒加载【性能优化】JS实现图片懒加载，今天在使用vue构建项目的时候就遇到了要做图片懒加载的优化需要，本想把前两天的代码直接copy过来的，后来想查查看有没有更简便的方法，果不其然... 查看详情

vue中实现汉字转化拼音(代码片段)

1、npmi js-pinyin2、importPinyinfrom"js-pinyin";3、APIconsole.log(pinyin.getFullChars('管理员'));//GuanLiYuanconsole.log(pinyin.getCamelChars('管理员'));//GLYconsole.log(pinyin.getCamel 查看详情

vue中实现大转盘抽奖(代码片段)

官方文档入口一.在Vue中使用安装插件npminstallvue-luck-draw找到main.js全局引入插件并use，或者在组件中按需引入插件。//按需引入importLuckyWheelfrom'vue-luck-draw'Vue.components('LuckyWheel',LuckyWheel)最后在页面内使用<LuckyWhe 查看详情

vue中实现汉字转化拼音(代码片段)

如何在vue中实现拖拽(代码片段)

1、npmi vuedraggable2、在组件中引入importvuedraggablefrom'vuedraggable';3、<template><vuedraggableclass="wrapper"v-model="list"><transition-group><divv-for& 查看详情

ssm实现图片上传返回预览图心得(代码片段)

...的文件对象，可供后续流程直接使用，而无需自行在代码中实现对文件内容的读取逻辑。　当收到请求时，DispatcherServlet的checkMultipart()方法会调用MultipartResolver的isMultipart()方法判断请求中是否包含文件。如果请求数据中包含... 查看详情

switch在vue中实现原理(代码片段)

<template><div><spanclass="weui-switch":class="‘weui-switch-on‘:isChecked":value="value"@click="toggle"style="position:relative"><divv-if="isChecked&&direction.length> 查看详情

vue中实现后台管理标签页(代码片段)

<template><section><divclass="navTabListel-tabs__nav-scroll"id="tabsNav"v-if="showTags"><ulclass="nt-ulel-tabs__nav"id="tabsNavList"><liv-for="(item,index)intagsList":class= 查看详情

vue3、vant中imagepreview图片预览

...端的地位还是很高的，本文简单介绍一下如何在自己项目中实现ImagePreview图片预览效果，获取图片索引,点击哪一张就预览哪一张一、效果图如下二、实现步骤，分为3步1、局部注册ImagePreview2、定义处理方法openImg，执行imagepreview... 查看详情