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

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

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

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

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

相关问题

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 组件中循环渲染文件列表，显示缩略图。

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

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，并根据实际需求进行其他相关配置。