Element UI upload组件点击查看直接预览大图

一、需求：

1.点击 upload左侧放大镜可直接预览大图
2.预览大图时可左右切换看不同的图

二、实现：

如下图，官网中直接使用dialog，实现了单张图片的展示，详细可见upload组件

<el-dialog :visible.sync="dialogVisible">
  <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>

截取部分代码进行展示，这里通过dialogVisible控制图片的显示或者隐藏，这里只能预览原图，所以上面两点都没有实现，但是给我们提供了一个思路，只要将图片放到这个dialog中，结合image组件中的大图预览，近似可以实现第二点，类似下图（设置upload弹出层中的el-img，可达到这样效果，具体代码这里就不展示了）：

这样虽然实现了第二点，但是第一点还是没有实现，点击之后还是得点击弹出层中的图片才可预览，后来看了下源码，这里的大图预览是基于这个image-viewer组件实现的，所以我们这里只需要结合这个组件即可完成想要的效果：

最终实现，效果如图，即点击upload的查看图标，结合on-preview钩子即可实现大图预览：

代码如下：

<template>
  <div>
    <el-image-viewer
      v-if="dialogVisible"
      zIndex="9999"
      :on-close="closeImgViewer"
      :url-list="imgList"
      :initial-index="imgIndex"
    />
  </div>
</template>
<script>
import ElImageViewer from "element-ui/packages/image/src/image-viewer";
export default {
  components: {
    ElImageViewer,
  },
  data() {
    return {
      imgList: [], //当前图片src数组
      imgIndex: 0, //当前选择的哪张图片
      dialogVisible: false,
      uploadListConfig: [],
    };
  },
  methods: {
    /**
     * @description 关闭图片查看器
     */
    closeImgViewer() {
      this.dialogVisible = false;
    },
    /**
     * @description 查看图片，配合on-preview使用
     * @param {object} file 当前选择文件对象
     */
    watchImg(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
      this.imgList = [];
      //获取图片的类从而查找当前界面的图片
      let dom = document.getElementsByClassName(
        "el-upload-list__item-thumbnail"
      );
      for (let i = 0; i < dom.length; i++) {
        this.imgList.push(dom[i].src);
        //当前选择的文件对象如果等于当前界面图片的某项src，就知道当前选择的哪张图片了
        if (file.url == dom[i].src) {
          this.imgIndex = i;
        }
      }
    },
  },
};
</script>

三、总结：

参考：使用 Element UI 查看大图的组件，查看 Upload 组件上传的图片

在此基础上完成的优化：
1.查看图片时不是只能查看第一张，而是点击哪一张就显示那一张，这里就用到了上面的这个imgIndex这个值
2.最关键不需要将src传到数组中，然后在各种钩子中控制，我们直接获取界面dom中图片元素，可以看到，element ui在显示图片这里会默认加上一个类:el-upload-list item-thumbnail，然后通过查找dom的方式去实现预览，即可实现以上两点

最后编辑于：2021.12.02 11:29:22