el-upload上传图片的放大、下载、删除（使用el-image-viewer）

未解决问题：照片墙底部留白      

1、
<el-upload
  action
  multiple
  ref="upload"
  class="upload-demo"
  :limit="limit"
  :file-list="formFileList"
  :accept="accept"
  :on-change="handleUploadForm"
  :auto-upload="false"
  :on-progress="handleProgress"
  :on-error="handleError"
  :on-success="handleSuccess"
  :on-exceed="handleExceed"
  show-file-list
  list-type="picture-card"
>
  <i class="el-icon-plus">选择图片</i>
  <div slot="file" slot-scope="{file}">
    <img class="el-upload-list__item-thumbnail"
      :src="file.url" alt
    >
      <span class="el-upload-list__item-actions">
        <span
          class="el-upload-list__item-preview"
          @click="handlePictureCardPreview(file)"
        >
          <i class="el-icon-zoom-in"></i>
        </span>
        <span
          class="el-upload-list__item-delete"
          @click="handleDownload(file)"
        >
          <i class="el-icon-download"></i>
        </span>
        <span
          class="el-upload-list__item-delete"
          @click="handleRemove(file)"
        >
          <i class="el-icon-delete"></i>
        </span>
    </span>
  </div>
</el-upload>
<el-image-viewer
  v-if="showViewer"
  :initial-index="this.index"
  :on-close="closeViewer"
  :url-list="this.urlList" />

      

2、
showViewer: false, // 显示查看器

3、

// 删除上传列表中文件      

handleRemove(file, fileList) {
  AttachApi.attachDel([file.id]).then(res => {
    this.formFileList.forEach((element, i) => {
      console.log(element.id)
      if (file.id === element.id) {
        this.formFileList.splice(i, 1)
      }
    })
  })
},

// 图片点击下载
handleDownload(file) {
  const fileUrl = file.url
  window.open(fileUrl)
},

// 图片查看器      

handlePictureCardPreview(file) {
  for (let i = 0; i < this.formFileList.length; i++) {
    this.urlList.push(this.formFileList[i].url)
  }
  this.index = file.index
  this.showViewer = true
},