el-upload文件点击预览

el-upload组件可以通过设置list-type属性为picture-card来实现点击图片预览的功能。具体实现方式如下：

1. 在el-upload组件中设置list-type属性为picture-card。
2. 在el-upload组件中添加一个slot插槽，用于自定义上传文件的内容。
3. 在slot插槽中添加一个el-image组件，用于显示上传的图片。
4. 在el-image组件中设置preview-src-list属性为上传的图片地址数组，这样就可以实现点击图片预览的功能。

示例代码如下：

<template>
  <el-upload
    class="upload-demo"
    action="/upload"
    list-type="picture-card"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :file-list="fileList">
    <i class="el-icon-plus"></i>
    <div class="el-upload__text">上传图片</div>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    <el-image
      slot="file"
      style="width: 100%"
      :preview-src-list="fileList.map(item => item.url)"
      :fit="fit"
      :lazy="lazy"
      :error-icon="errorIcon"
      :src="''">
    </el-image>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      fileList: [],
      fit: 'cover',
      lazy: true,
      errorIcon: 'el-icon-picture-outline'
    };
  },
  methods: {
    handlePreview(file) {
      // 点击预览图片
    },
    handleRemove(file) {
      // 删除图片
    }
  }
};
</script>