element ui的el-upload上传组件中使用el-image的图片预览

问题

想在element ui的el-upload上传组件中使用el-image的图片预览，这样就可以放大和缩小还有多张图片切换
因为el-upload提供的是使用对话框查看图片,不能放大缩小还不能左右切换

说明

在el-image组件内的预览功能是使用的el-image-viewer这个小组件实现的,所以我们直接导入调用这个组件即可
还有就是要设置一下层级z-index,不然图片可能在弹窗后面,如果不是对话框可以不用设置
参考文章1:https://www.cnblogs.com/it774274680/p/16739988.html
参考文章2:https://blog.csdn.net/ZYS10000/article/details/121881485

效果

代码

<template>
  <div class="app">
    <el-upload action="" list-type="picture-card" :on-preview="handlePictureCardPreview"
	:file-list="fileList"></el-upload>
	<image-viewer v-if="imgViewerVisible" :urlList="previewSrcList" :on-close="onClose" :z-index="2100" />
  </div>
</template>

import ImageViewer from "element-ui/packages/image/src/image-viewer";
export default {
  components: {
    ImageViewer,
  },
  data() {
    return {
      fileList: [],
	  previewSrcList:[],
      imgViewerVisible: false,
    };
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
		//把用户点击的那张图片放到第一个位置,这样打开就能看到自己点击的那张图片
		this.previewSrcList = this.fileList.filter(e => e.url !== file.url).map(e=> e.url);
		this.previewSrcList.unshift(file.url)
		//设置 图片查看器 进行显示
		this.imgViewerVisible = true;
    },
    onClose() {
      this.imgViewerVisible = false;
    }
  },
};
</script>