使用el-upload上传图片，改造预览功能

今天给大家介绍一下在使用Element的el-upload上传图片的过程中，改造原有的预览功能。

官网预览效果图：

改造之后的预览效果：

区别如下

• 官网的预览效果，只能单纯预览当前图片
• 改造之后，可以对预览图片进行放大、缩小、旋转、下一张等操作

实现代码

<el-upload
    action="#"
    multiple
    list-type="picture-card"
    :class="{'is-not-allow-access':picIDListCount>=3}"
    :file-list="imageUrls"
    :on-remove="handleRemove"
    :on-preview="handlePictureCardPreview"
    :on-success="uploadSuccess"
  >
    <span> <i class="el-icon-plus" style="font-size:14px;" ></i> 添加图片</span>
  </el-upload>
  <!-- 大图预览 -->
  <el-image-viewer
      v-if="showImgViewer"
      :on-close="closeImgViewer"
      :url-list="imagePreviewUrls"
      :z-index="3000"
      :initial-index="initialImgPreviewIndex"
  />

import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
  components: {
      ElImageViewer
  },
  data(){
    return {
      initialImgPreviewIndex:0, // 预览打开看到的图片下标
      imagePreviewUrls:[], // 预览图片的下标
    }
  },
  methods:{
    // 图片预览
    handlePictureCardPreview (file) {
      let index = this.imagePreviewUrls.indexOf(file.url)
      if (index >= 0) {
        this.initialImgPreviewIndex = index
      }
      this.showImgViewer = true
    },
    closeImgViewer () {
      this.showImgViewer = false
    },
    // 上传成功回调
    uploadSuccess (file, fileList) {
      if (fileList.status === 'success') {
        this.imagePreviewUrls.push(fileList.url) // 预览图片的数组
      }
    },
    // 删除选中的文件
    handleRemove (file) {
      // 删除预览数组对应的图片
      let index = this.imagePreviewUrls.indexOf(file.url)
      if (index > -1) {
        this.imagePreviewUrls.splice(index, 1)
      }
      // 执行删除
    },

  }

新选择了图片，要添加到预览图片数组中【见 uploadSuccess 方法】

在删除图片后，也要同步删除预览数组（imagePreviewUrls）中的该图 【见 handleRemove 方法】

在点击预览的时候，要传入预览组件要打开图片的下标【见 handlePictureCardPreview 方法】

以上代码为elementUI未暴露出来的组件，感兴趣的同学可以看下源码，在node_modules/element-ui/packages/image/src/image-viewer,还有许多可配置的参数