el-upload上传文件展示缩略图

要在el-upload组件中展示上传文件的缩略图，您可以使用以下步骤：

1. 配置el-upload组件：设置`show-file-list`属性为`true`，以显示上传文件列表。

<el-upload
  show-file-list
  action="/your-upload-url"
>
  <!-- 其他组件内容 -->
</el-upload>

2. 通过插槽自定义文件列表项：使用`slot-scope`来自定义el-upload的文件列表项，可以在该插槽中展示缩略图。

<el-upload
  show-file-list
  action="/your-upload-url"
>
  <template slot-scope="{ file }">
    <!-- 自定义文件列表项的展示 -->
    <div>
      <img :src="file.url" alt="缩略图" width="100" height="100">
      <span>{{ file.name }}</span>
    </div>
  </template>
</el-upload>

在上述代码中，通过`file.url`属性获取上传文件的缩略图URL，并将其作为`img`标签的`src`属性值。您可以根据实际情况调整缩略图的尺寸和样式。

请确保在配置el-upload组件时，将`action`属性设置为您的上传URL，并根据实际需求进行其他相关配置。

相关问题

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 为上传文件的接口地址，你需要根据实际情况进行修改。

el-upload上传图片缩略显示不出来

可能是由于缺少设置图片样式的原因导致上传的图片无法显示缩略图。在使用el-upload组件上传图片时，可以通过设置list-type属性为picture-card，然后在上传成功的回调函数中设置图片的样式。

你可以尝试以下步骤来解决问题：

1. 确保在el-upload组件中设置了list-type属性为picture-card，这样可以显示图片的缩略图。
2. 在上传成功的回调函数中，根据返回的文件URL设置缩略图的样式。你可以使用CSS中的background-image属性来设置背景图片，或者使用img标签来显示缩略图。
3. 检查上传的文件是否正确，确保文件类型和路径是正确的。

如果问题仍然存在，请提供更多的代码和错误信息，以便我们更好地帮助你解决问题。