el-upload + el-image-viewer 实现上传的图片点击查看大图

 el-upload  属性

            <el-upload class="upload-demo" :disabled="isShow" :action="upload.url" :headers="upload.headers"
              :on-preview="handlePreview" :on-remove="handleRemove" :file-list="saleOnsiteProblemFeedbackFileList"
              :on-success="handleSuccess" list-type="picture" :class="{ disabled: true, 'avatar-uploader': true }"
              accept=".bmp,.gif,.jpg,.jpeg.png">
              <el-button size="small" :disabled="isShow" type="primary">点击上传</el-button>
            </el-upload>

el-image-viewer 属性

<el-image-viewer v-if="dialogVisible" class="image onsite-img" :url-list="[dialogImageUrl]" :on-close="closeViewer" />

default 里面

dialogImageUrl: [],

components 里面

    components: {
      'el-image-viewer': () => import('element-ui/packages/image/src/image-viewer')
    },

      //点击图片放大
      handlePreview(file) {
        //这里是因为后台返回来的url，跟新上传的url不一样
        let url = file.url ||  file.response.imgUrl;
        this.dialogImageUrl = url;
        this.dialogVisible = true;
      },
      //图片删除
      handleRemove(file, fileList) {
        this.form.fileList = fileList;
      },
      // 关闭查看器
      closeViewer() {
        this.dialogVisible = false
      },
      //上传图片
      handleSuccess(res, file) {
        this.saleOnsiteProblemFeedbackFileList.push({
          name: file.name,
          url: res.imgUrl,
        });
      },

做的时候网上搜的，但是现在找不到了，就做一个笔记

解决点击之后大图在原弹框下面，但是感觉不好用

<style lang="scss">
  .onsite-img{
    z-index: 2020!important;
  }
</style>