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

1. 引入查看大图的组件

import ElImageViewer from "element-ui/packages/image/src/image-viewer";

2. 注册组件

 components: { ElImageViewer },

3. 加入 html

<!-- 大图预览 -->
<el-image-viewer
  v-if="showImgViewer"
  :on-close="closeImgViewer"
  :url-list="imgPreviewList"
/>

4. data 里添加

// 显示图片查看器
showImgViewer: false,
// 查看大图列表
imgPreviewList: [],

5. 图片上传组件添加钩子

 :on-preview="openImgViewer"

6. methods 里添加

// 打开图片查看器
openImgViewer(file) {
  // 获取要查看的图片临时地址
  this.imgPreviewList = [file.url];

  // 显示图片查看器
  this.showImgViewer = true;
},
// 关闭图片查看器
closeImgViewer() {
  this.showImgViewer = false;
},