Upload 上传图标不显示

软件技术NINI

于 2024-08-12 11:00:42 发布

阅读量800

点赞数 9

分类专栏： vue案例文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/2301_78133614/article/details/141125905

版权

vue案例专栏收录该内容

15 篇文章 0 订阅

订阅专栏

el-upload如果在使用 Element UI 的 <el-upload> 组件时上传图标不显示，可能是由几个不同的原因造成的。以下是一些排查和解决这个问题的步骤：

如果在使用 Element UI 的 <el-upload> 组件时上传图标不显示，可能是由几个不同的原因造成的。以下是一些排查和解决这个问题的步骤：

检查 Element UI 版本：
确保你使用的 Element UI 版本支持 <el-upload> 组件，并且没有已知的与上传图标相关的 bug。
检查 CSS 加载：
确保 Element UI 的 CSS 文件已经被正确加载到你的项目中。如果 CSS 没有被加载，那么图标和其他样式可能无法正确显示。
检查图标字体文件：
Element UI 使用图标字体来显示图标，包括上传图标。确保图标字体文件（如 .woff 或 .ttf 文件）已经被下载并可通过你的服务器访问。如果图标字体文件无法加载，图标将不会显示。
检查网络请求：
使用浏览器的开发者工具（通常可以通过按 F12 打开）来检查网络请求。查看是否有任何与图标字体或 Element UI CSS 相关的请求失败。
检查 <el-upload> 组件的 slot：
<el-upload> 组件允许你使用 slot 来自定义触发上传的按钮。如果你使用了 slot 并覆盖了默认的上传按钮，那么你需要确保你的自定义按钮中包含了上传图标（如果这是你想要的效果）。如果你想要显示默认的上传图标，确保你没有使用 slot 来覆盖它。
检查 Vue 组件的样式：
有时候，Vue 组件的样式可能会覆盖 Element UI 的默认样式，导致图标不显示。检查你的 CSS 是否有任何可能影响到 <el-upload> 组件的样式规则。
查看 Element UI 文档和示例：
查看 Element UI 的官方文档和示例，确保你按照文档中的方式使用了 <el-upload> 组件。
清除缓存：
有时候，浏览器缓存可能会导致样式或脚本文件没有更新。尝试清除浏览器缓存或使用无痕/隐私模式重新加载页面。
检查父组件的样式：
如果 <el-upload> 组件被嵌套在另一个 Vue 组件中，确保父组件的样式没有影响到 <el-upload> 组件的显示。
查看控制台错误：
使用浏览器的开发者工具查看控制台是否有任何错误或警告信息，这些信息可能会提供关于为什么上传图标不显示的线索。

如果以上步骤都不能解决问题，你可能需要更详细地检查你的项目配置或寻求 Element UI 社区的帮助。

<template>
    <el-upload
      class="upload-demo"
      drag
      action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
      multiple
    >
      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
      <div class="el-upload__text">
        <p>将文件或文件夹拖到此处，或点击上传文件</p>
        <p class="upload-tips">1.仅支持图片和视频文件，上传添加不超过500个</p>
        <p class="upload-tips">
            2.支持图片格式：png、jpg、jpeg、gif，不超过8MB；支持视频格式：mp4、mpeg、3pg、avi、mov，不超过5G </p>
        <p class="upload-tips">3.素材上传后需对尺寸、码率等进行分析，约1-3分钟后方可用于投放</p>
    </div>
      </template>
    </el-upload>
  </template>
  
  <script setup lang="ts">
  import { UploadFilled } from '@element-plus/icons-vue'
  </script>