<el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/" multiple> <i class="el-icon-upload"></i> <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div> </el-upload>在这段代码中，怎么样将上传的文件名字显示在页面上，用一个span标签吗

是的，你可以在 `el-upload` 组件内部添加一个 `slot="default"` 的 `span` 标签来显示上传的文件名字。具体实现方式如下：

<el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/" multiple>
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
  <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
  <span slot="default">
    {{ fileList.length > 0 ? fileList[0].name : '' }}
  </span>
</el-upload>

在上面的代码中，我们添加了一个 `span` 标签，并且指定了 `slot="default"`。在这个 `span` 标签内部，我们使用了 `fileList` 数组来获取上传的文件列表，然后显示第一个文件的文件名字。如果没有上传任何文件，就显示空字符串。

相关问题

vue3 <el-upload

### Vue3 中使用 Element Plus 的 `el-upload` 组件

#### 安装依赖包
为了能够在项目中使用 `el-upload`，首先需要安装 Element Plus 库。

npm install element-plus

#### 基本配置与导入
在 Vue 项目的入口文件或相应组件内引入并注册所需的 Element Plus 组件：

import { ElUpload, ElButton } from 'element-plus';
// 或者全局引入整个库
// import * as ElementPlus from 'element-plus';

export default {
    name: "App",
    components: {
        ElUpload,
        ElButton,
    },
};

#### 创建上传表单
定义 HTML 结构用于显示上传按钮和其他交互元素。这里给出一个基础的例子[^1]：

<template>
  <div class="upload-demo">
      <!-- action 表示提交的目标 URL -->
      <el-upload
          class="upload-demo"
          drag
          multiple
          :action="uploadUrl"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-upload="beforeAvatarUpload"
          :on-success="handleSuccess"
          :file-list="fileList">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传 jpg/png 文件，且不超过500kb</div>
      </el-upload>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const fileList = ref([])

const uploadUrl = 'https://jsonplaceholder.typicode.com/posts/' // 替换成实际服务器地址

function handlePreview(file){
    console.log('preview', file);
}

function handleRemove(file, fileList){
    console.log('remove', file, fileList);
}

function beforeAvatarUpload(file) {
    const isJPGorPNG = ['image/jpeg','image/png'].includes(file.type);
    const isLt2M = file.size / 1024 / 1024 < 2;

    if (!isJPGorPNG) {
        alert('仅支持 JPG 和 PNG 格式的图片!');
    }
    if (!isLt2M) {
        alert('图片大小不得超过 2MB!');
    }

    return isJPGorPNG && isLt2M;
}

function handleSuccess(response, file, fileList){
    console.log('success', response, file, fileList);
}
</script>

此代码片段展示了如何创建一个带有预览功能和支持多选文件的上传区域，并设置了文件类型的限制以及最大尺寸验证逻辑。当成功完成一次上传操作时会触发相应的回调函数处理响应数据。

对于更复杂的应用场景比如对接阿里云OSS服务，则可能涉及到额外的身份认证机制设置、自定义请求头等内容[^4]；而对于大型多媒体资源如视频则需考虑分片传输策略以提高效率和稳定性[^3]。

el-upload--text

### 关于 `el-upload--text` 组件的使用方法及样式说明

#### 使用方法

在Element UI中，`el-upload`组件提供了多种类型的文件上传方式，其中一种是基于文本链接形式的上传触发器。为了创建这种样式的上传控件，可以利用`el-upload`标签内的特定属性来定制化显示效果。

对于采用文字作为触发上传操作的方式而言，在模板部分应当这样编写：

<el-upload
  class="upload-demo"
  drag
  action="https://jsonplaceholder.typicode.com/posts/"
  multiple>
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
</el-upload>

上述代码片段展示了如何配置一个带有文本提示信息（即“将文件拖到这里... 或者 点击上传”）以及图标装饰的文字型上传入口[^1]。

需要注意的是，“el-upload--text”的表述并非官方文档中的正式命名；实际上是指定了一套视觉表现风格——以纯文本而非按钮等形式呈现上传交互区域的一种模式。因此，在实际开发过程中应关注具体实现细节而不是名称本身。

#### 样式调整

针对此类具有特殊外观需求的情况，默认情况下可通过CSS类`.el-upload__text`来自定义内部文案及其布局特性。如果希望进一步修改其外貌特征，则可以通过覆盖原有样式或者新增额外的选择器来进行个性化设计：

/* 修改默认字体颜色 */
.el-upload .el-upload__text {
    color: #409EFF;
}

/* 调整鼠标悬停时的效果 */
.el-upload:hover .el-upload__text em{
    text-decoration: underline;
}

此外，还可以借助scoped作用域内联样式表或者其他预处理器语法如Sass等手段达成更复杂的UI定制目标[^2]。