废话不多说，直接上代码：
1、首先，项目需要先引入 element 组件
2、第一种预览方式
1、组件使用 <div style="display: inline-block;width: 10px;width: 84%;"> <el-upload multiple action="#" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-exceed="(fileList)=>{this.$message({type:'warning' , message : '已选数量超出上传限制，请重新选择'})}" :on-change="handleChange" accept=".png, .jpg, .jpeg" :auto-upload="false" :file-list="fileList" :limit="3" :class="fileList && fileList.length >= 3 ? 'hide' : 'show'"> <i class="el-icon-plus"></i> </el-upload> <el-dialog :append-to-body="true" :visible.sync="PreviewVisible" style="width: 60%;margin-left: 20%;"> <el-image style="width: 500px;height: 500px;" :src="dialogImageUrl" fit='fill' alt=""></el-image> </el-dialog> </div> js： handlePictureCardPreview(file) { console.log(file) this.PreviewVisible = true; this.dialogImageUrl = file.url; },
第二种预览方案
App.vue
<template> <div id="app" :pageName="$route.name"> <router-view v-if="isRouterFresh"></router-view> <!--图片预览--> <el-image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="showViewerImages" :initialIndex="initialIndex" /> </div> </template> <script> import ElImageViewer from 'element-ui/packages/image/src/image-viewer' export default { name: "app", components: { ElImageViewer }, data() { return { // 图片预览 showViewer: false, showViewerImages: [], // 预览地址集合['xxx.jpg','xxx.jpg'] //重新渲染页面 isRouterFresh: true, initialIndex: 0, } }, methods: { // 预览 createPreview(arrUrl) { this.showViewerImages = arrUrl; this.showViewer = true //检查播放器 if (window.oWebControl) { window.oWebControl.JS_HideWnd(); } }, closeViewer() { this.showViewer = false; this.showViewerImages = []; //检查播放器 if (window.oWebControl) { window.oWebControl.JS_ShowWnd(); } }, isFreshView() { this.isRouterFresh = false; this.$nextTick(() => { this.isRouterFresh = true; }); } }, created() { var vue = this; //调用方式：window.createPreview(['ddd.jpg', 'ddd.jpg']) window.createPreview = function (arrUrl, initialIndex) { vue.createPreview(arrUrl) vue.initialIndex = initialIndex } window.isFreshView = function () { vue.isFreshView(); } //禁止右键 // window.oncontextmenu = function(){ // return false; // } } }; </script> <style lang="less"> #app { height: 100%; } </style>
组件的使用
vue文件： <div style="display: inline-block;width: 10px;width: 84%;"> <el-upload multiple action="#" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-exceed="(fileList)=>{this.$message({type:'warning' , message : '已选数量超出上传限制，请重新选择'})}" :on-change="handleChange" accept=".png, .jpg, .jpeg" :auto-upload="false" :file-list="fileList" :limit="3" :class="fileList && fileList.length >= 3 ? 'hide' : 'show'"> <i class="el-icon-plus"></i> </el-upload> </div> js 图片预览： handlePictureCardPreview(file) { window.createPreview([file.url]); }, 遮罩层层级需要设置一下： .el-image-viewer__wrapper{ z-index: 99999999999 !important; }
第三种预览方案viewer.js
1、下载资源包
Viewer.js官网下载地址：Viewer.js
CSDN下载
2、将下载的js引入本地
main.js
//图片预览 import '@/assets/viewer/viewer.css' import VueViewer from '@/assets/viewer/index.mjs' app.use(VueViewer, { defaultOptions: { zIndex: 9999, //图片查看器的modal模式时的z-index title : false, //显示当前图片标题 navbar: false, //缩略图导航 BUTTONS : ['prev', 'next' ,'zoom-in', 'zoom-out', 'one-to-one', 'rotate-right'] } })
App.vue
previewImages(urls ,index = 0){ this.$viewerApi({ images : urls, options : { initialViewIndex : index } }) },
操作图片的vue
<el-form-item label="附件" prop="att_info" online> <div style="display:flex; flex-wrap: wrap;"> <el-upload ref="upload" action="#" multiple :limit="9 - dialogData.att_info.length" accept=".jpg,.jpeg,.png,.bmp,.pdf,.xls,.xlsx,.doc,.docx" :show-file-list="false" :on-exceed="(fileList)=>{this.$message({type:'warning' , message : '已选数量超出上传限制，请重新选择'})}" :on-change="uploadChange" :auto-upload="false" style="display:none;" v-if="uploadFresh" /> <div class="avatar avatar-animate" v-for="(item ,index) in dialogData.att_info" :key="index" style="margin-right:10px;"> <div class="img-box" v-if="item.file_url"> <img v-if="item.mime_type == 'image/png' || item.mime_type == 'image/jpg' || item.mime_type == 'image/jpeg' || item.mime_type == 'image/bmp'" :src="item.file_url" /> <img v-if="item.mime_type == 'application/pdf'" src="/static/images/pdf.png" /> <img v-if="item.mime_type == 'application/msword' || item.mime_type == 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'" src="/static/images/word.png" /> <img v-if="item.mime_type == 'application/vnd.ms-excel' || item.mime_type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'" src="/static/images/excle.png" /> <span> <i-zoom-in @click.stop="previewImages(index)" /> <i-delete @click.stop="deleteImages(index)" /> </span> </div> </div> <div class="d-upload" @click="uploadClick" v-if="dialogData.att_info.length < 9"><i-plus /></div> <p style="color:#999; display:block; width:100%; padding:5px 0 0; line-height:20px; font-size:12px;">附件支持png、jpg、bmp、pdf、word、xls且最多可上传9个，单附件不能超过10M，请压缩后再上传</p> </div> </el-form-item> previewImages(index) { switch(this.dialogData.att_info[index].mime_type){ case 'image/png': case 'image/jpg': case 'image/jpeg': case 'image/bmp': //标记 var imgItems = JSON.parse(JSON.stringify(this.dialogData.att_info)) imgItems[index].indexNow = true imgItems = imgItems.filter(c=>c.mime_type == 'image/png' || c.mime_type == 'image/jpg' || c.mime_type == 'image/jpeg' || c.mime_type == 'image/bmp') window.$previewImages(imgItems.map(c=>c.file_url) , imgItems.findIndex(c=>c.indexNow)) break; default: window.open(this.dialogData.att_info[index].file_url) break; } },
第四种预览方案
<div class="demo-image__preview" style="height: 0;"> <el-image style="height: 0;" ref="previewImg" :preview-src-list="imageUrlListYl" :src="imageUrlYl"></el-image> </div> imageUrlYl:'', imageUrlListYl:[], handlePictureCardPreview(file) { this.imageUrlYl = file.url this.fileList.forEach(item => { this.imageUrlListYl.push(item.url) }) this.$refs.previewImg.showViewer = true },
附送250套精选项目源码
源码截图
源码获取：关注公众号「码农园区」，回复 【源码】，即可获取全套源码下载链接
