el-upload显示缩略图

要在 el-upload 组件中显示缩略图，你可以使用 el-avatar 组件作为缩略图的容器。以下是一个示例代码：

<template>
  <div>
    <el-upload
      class="upload-demo"
      action="/upload"
      :on-success="handleUploadSuccess"
      :before-upload="beforeUpload"
      :file-list="fileList"
      multiple>
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>
    <el-avatar
      v-for="(file, index) in fileList"
      :key="index"
      :src="file.url"
      shape="square">
    </el-avatar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: []
    };
  },
  methods: {
    handleUploadSuccess(response, file, fileList) {
      // 在上传成功后，更新文件列表
      this.fileList = fileList;
    },
    beforeUpload(file) {
      // 在上传前预览图片
      const reader = new FileReader();
      reader.onload = (e) => {
        this.fileList.push({
          url: e.target.result
        });
      };
      reader.readAsDataURL(file);
      return false; // 阻止默认上传行为
    }
  }
}
</script>

<style>
.upload-demo {
  display: inline-block;
}
</style>

在这个例子中，我们使用 el-upload 组件来处理文件上传，并在上传成功后更新文件列表。在 beforeUpload 方法中，我们使用 FileReader API 来预览图片并将其添加到文件列表中。然后，在 el-avatar 组件中循环渲染文件列表，显示缩略图。

你可以根据自己的需求调整代码，并根据实际情况设置合适的样式。希望这能帮到你！