需求:上传格式不限,要求文件可以预览以及下载,word、zip等格式预览不要求,图片要能预览
在这里插入图片描述
在这里插入图片描述
解决:
引入组件

import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
components: { ElImageViewer },

在这里插入图片描述

在这里插入图片描述
点击按钮弹窗大图预览

<!--大图预览-->
      <el-image-viewer
           v-if="showViewer"
           :on-close="closeViewer"
           :url-list="viewPhotoList"
       />
       //viewPhotoList 为图片路径数组,接口返回的数据处理,将图片整合到这个数组

在这里插入图片描述

// 关闭查看器
        closeViewer() {
            this.showViewer = false
        },
        // 点击按钮预览图片
        onPreview(img) {
            this.showViewer = true;
            this.viewPhotoList.forEach((item,index)=>{
                if(img==item){
                    this.imgSrcIndex=index;
                }
            })
            //大图预览从点击的那张开始
            let tempImgList = [...this.viewPhotoList];
            let temp = [];
            for (let i = 0; i < this.imgSrcIndex; i++) {
                temp.push(tempImgList.shift());
            }
            this.viewPhotoList = tempImgList.concat(temp);
        },
Logo

前往低代码交流专区

更多推荐