<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-plus el-upload 上传视频预览

### Element Plus `el-upload` 组件用于视频上传及预览

为了实现视频文件的上传以及预览功能，在前端开发中通常会采用 Vue.js 结合 Element Plus 的方式来构建界面。具体来说，通过配置 `el-upload` 组件的各项属性和监听器，能够满足业务逻辑的需求。

#### 配置项设置

- **action**: 设置服务器端接收上传请求的地址。
- **before-upload**: 定义上传前的操作函数，可用于验证文件类型、大小等条件[^2]。

const beforeUploadHandler = (file) => {
    const isVideo = file.type === 'video/mp4'; // 或者其他支持的视频格式
    if (!isVideo) {
        ElMessage.error('仅允许上传MP4格式!');
    }
    const isLt10M = file.size / 1024 / 1024 < 10;
    if (!isLt10M) {
        ElMessage.error('上传视频大小不能超过  10MB!');
       }
    return isVideo  &&  isLt10M;
};

- **on-preview**: 当点击已上传文件列表内的文件链接时触发此回调，可用来处理播放视频的动作。

<template>
  <!-- ... -->
  <el-button  type="primary"  @click="handlePreview">预览</el-button>
  <!-- ... -->
</template>

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

let  videoUrl = ref('');

function handlePreview(file: any){
    videoUrl.value = URL.createObjectURL(file.raw);
}
</script>

<!-- 使用HTML5  Video标签显示视频  -->
<video  v-if="videoUrl  !== ''"  :src="videoUrl" controls></video>

- **auto-upload=false**: 关闭自动上传选项以便手动控制何时发起上传操作。

#### 处理上传过程中的状态变化

利用 `on-progress`, `on-success`, 和 `on-error` 这三个事件处理器分别应对不同阶段的状态更新：

- `on-progress`: 显示进度条给用户看当前上传进展程度；
- `on-success`: 成功完成上传之后执行相应动作比如刷新页面或清空表单；
- `on-error`: 如果发生错误则给出提示信息告知用户出现问题所在。

<el-upload
    class="upload-demo"
   drag
    action="https://jsonplaceholder.typicode.com/posts/"
  multiple
  :before-upload="beforeUploadHandler"
    :on-preview="handlePreview"
  :on-success="handleSuccess"
   :on-error="handleError"
  :on-progress="handleProgress"
  :auto-upload="false"
>
    <i  class="el-icon-upload"></i>
    <div  class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    <template #tip>
    <div  class="el-upload__tip">只能上传mp4文件，且不超过10mb</div>
  </template>
</el-upload>

以上就是基于 Element Plus 中 `el-upload` 组件实现视频上传及其预览的主要思路和技术要点[^3]。