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