element-ui的el-upload组件文件列表中文件图标自定义显示

Element UI 的 `el-upload` 组件允许你在文件列表中对上传的文件展示图标，以增强用户体验。你可以通过 `file-list` 选项来自定义每个文件的图标。这里是一个基本的例子：

<template>
  <el-upload
    :action="uploadUrl"
    list-type="picture-card" // 设置为 'picture-card' 类型以便显示图片卡片
    :file-list="fileList"
    :on-change="handleChange"
  >
    <i class="el-icon-plus"></i> Click to upload
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      fileList: [], // 这里用于存储文件信息，包括文件名和自定义图标
      uploadUrl: 'your-url-here', // 你的上传URL
    };
  },
  methods: {
    handleChange(file) {
      // 当文件改变时，更新文件列表
      this.fileList.push({
        name: file.name,
        url: URL.createObjectURL(file), // 创建一个临时URL来作为图标
        icon: '<img src="' + file.url + '" alt="" style="width: 50px;">', // 自定义图标
      });
    }
  },
};
</script>

<style scoped>
/* 可以为 img 样式添加自定义样式 */
.el-upload__item .file-item img {
  width: 50px;
}
</style>

在这个例子中，我们创建了一个新的字段 `icon`，当文件变化时，会生成一个包含文件URL的HTML `<img>` 标签作为文件的图标。