element-ui 2.0 版本 el-upload picture-card 文件缩略图 简单例子（预览、下载，删除）

主要页面显示部分

<template>
    <div class="image-thumbnail">
        <el-upload
                ref="elUpload"
                action=""
                list-type="picture-card"
                :auto-upload="true"
                :http-request="uploadSectionFile"
                :on-remove="handleRemove"
        >
            <i slot="default" class="el-icon-plus"/>
            <div slot="file" slot-scope="{file}">
                <el-image 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"/>
                    </span>
                    <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                        <i class="el-icon-download"/>
                    </span>
                    <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                      <i class="el-icon-delete"/>
                    </span>
                </span>
            </div>
        </el-upload>
        <!--图片预览-->
        <el-image-viewer :z-index="2002" v-if="showViewer" :on-close="closeViewer" :url-list="[dialogImageUrl]"/>
    </div>
</template>

<script>
  import {imageUpload} from '@/api/business/common';
  import ElImageViewer from 'element-ui/packages/image/src/image-viewer';

  export default {
    name: 'imageThumbnail',
    components: {ElImageViewer},
    data() {
      return {
        dialogImageUrl: '',
        fileList: [],
        disabled: false,
        showViewer: false, // 显示查看器
      }
    },
    methods: {
      // 删除
      handleRemove(file) {
        let uploadFiles = this.$refs.elUpload.uploadFiles;
        uploadFiles.forEach((value, index) => {
          if (value.uid === file.uid) {
            uploadFiles.splice(index, 1)
            this.fileList.splice(index, 1)
          }
        })
      },
      // 大图预览
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.showViewer = true;
      },
      // 下载图片
      handleDownload(file) {
        let a = document.createElement('a');
        a.download = file.name;
        a.href = (file.url);
        a.click();
      },
      // 重写上传
      uploadSectionFile(params) {
        const file = params.file,
            fileType = file.type,
            isImage = fileType.indexOf('image') !== -1,
            isLt2M = file.size / 1024 / 1024 < 2;
        // 这里常规检验，看项目需求而定
        if (!isImage) {
          this.$message.error('只能上传图片格式png、jpg、gif!');
          return;
        }
        if (!isLt2M) {
          this.$message.error('只能上传图片大小小于2M');
          return;
        }
        // 根据后台需求数据格式
        const form = new FormData();
        // 文件对象
        form.append('files', file);
        // 本例子主要要在请求时添加特定属性，所以要用自己方法覆盖默认的action
        // form.append("clientType", 'xxx');
        // 项目封装的请求方法，下面做简单介绍
        imageUpload(form).then(res => {
          //自行处理各种情况
          if (res.code === 200) {
            this.fileList.push(res.data[0])
          } else {
            this.$message.warning(res.message);
          }
        }).catch(() => {
          // xxx
        });
      },
      // 关闭
      closeViewer() {
        this.showViewer = false;
      },
    },
  };
</script>

<style lang="scss" scoped>
    .image-thumbnail {

    }
</style>

接口

export function imageUpload(data) {
  return request( {
    url: '/file/upload',
    method:'POST',
    headers: {'content-type': 'multipart/form-data'},
    data
  });
}

实现效果：

展示效果

操作功能

下载功能

预览功能