Upload 上传图标不显示
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-uploadclass="upload-demo"dragaction="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>