Vue element组件el-upload之on-preview图片预览，实战篇之多种预览方式-编程知识

废话不多说，直接上代码：

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-indextitle : 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 = trueimgItems = 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.urlthis.fileList.forEach(item => {this.imageUrlListYl.push(item.url)})this.$refs.previewImg.showViewer = true},