el-upload文件缩略图

对于 el-upload 组件来说，要实现文件缩略图的功能，你可以通过以下步骤进行操作：

1. 首先，确保你已经安装了 element-ui 组件库。如果没有安装，可以通过 npm 或 yarn 进行安装。

2. 在你的组件中，引入 el-upload 组件，并设置相应的属性和事件。例如：

<template>
  <el-upload
    :action="uploadUrl"
    :on-success="handleSuccess"
    :file-list="fileList"
    :list-type="'picture-card'"
  >
    <i class="el-icon-plus"></i>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      uploadUrl: 'your_upload_url',
      fileList: [],
    };
  },
  methods: {
    handleSuccess(response, file, fileList) {
      // 处理上传成功后的回调逻辑
      // 在这里可以获取到上传成功后的文件信息，例如缩略图地址
      console.log(response); // 上传成功后服务端返回的数据
      console.log(file); // 当前上传的文件对象
      console.log(fileList); // 已上传的文件列表

      // 将缩略图地址存储到 fileList 中
      file.url = response.thumbnailUrl;
      this.fileList = fileList;
    },
  },
};
</script>

3. 在 handleSuccess 方法中，你可以获取到上传成功后的文件信息。你可以在这里将缩略图地址存储到 fileList 中，并更新组件的 fileList 数据。

4. 最后，你可以通过遍历 fileList 数组，在 el-upload 组件中展示缩略图。例如：

<template>
  <el-upload
    :action="uploadUrl"
    :on-success="handleSuccess"
    :file-list="fileList"
    :list-type="'picture-card'"
  >
    <i class="el-icon-plus"></i>
  </el-upload>

  <div v-for="file in fileList" :key="file.uid">
    <img :src="file.url" alt="缩略图" />
  </div>
</template>

这样，当你选择文件上传后，会显示上传成功的缩略图。请注意，此示例中的 uploadUrl 为上传文件的接口地址，你需要根据实际情况进行修改。