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, // 显示查看器

urlList: [], // 图片的url

formFileList: [], // 显示的上传文件

index: 0, // 图片文件的序号，从后台初始加载图片列表，push到formFileList时，给加一个序号，用于图片查看器的图片查看，上传新图片时也要加序号

3、方法

// 初始化
async initData() {
  let albumId = this.$route.query.id
  // 相册信息
  if (albumId != null) {
    this.loading = true
    AlbumApi.getAlbum(albumId).then(res => {
      this.form = res.body.album
    }).finally(() => {
    })
  }
  // 图片列表
  if (albumId != null) {
    const param = {
      xxx: this.xxx,
    }
    const res = await AttachApi.attachQuery(param)
    if (res.success && res.body.list) {
      const list = res.body.list
      list.forEach(element => {
        console.log(element)
        this.formFileList.push({index: this.index++, name: element.attachName, url: attachDownloadUrl + element.attachId, id: element.attachId})
      })
    }
  }
  this.loading = false
},

// 删除上传列表中文件

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
},

// 关闭图片查看器

closeViewer() {

  this.showViewer = false
}

// 上传结果集返回后，编序号

console.log('上传结果返回：' + JSON.stringify(res))
if (res && res.success) {
  let newPicIndex = this.formFileList.length // 即放在原图片列表的后面
  this.formFileList.push({index: newPicIndex, name: res.body.name, url: res.body.url, id: res.body.id})
}