关于前端:使用-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;},