vue3 element-plus 上传视频

Vue3中使用Element Plus库进行文件上传操作，特别是视频文件，可以参考Element Plus提供的`el-upload`组件。以下是一个简单的步骤和示例：

1. 安装依赖：
首先确保已经安装了Vue3和Element Plus，如果没有，可以使用npm或yarn安装：

npm install vue@next element-plus
# 或者
yarn add vue@next element-plus

2. 引入并使用`el-upload`组件：
在你的组件模板中引入`<el-upload>`标签，并设置必要的属性。例如，你可以设置允许上传的文件类型、上传大小限制、以及处理上传成功的回调函数。

<template>
  <el-upload
    action="your-api-url" {/* 上传服务器地址 */}
    :accept="'.mp4,.avi'" {/* 允许上传的视频格式 */}
    :max-size="5000000" {/* 最大文件大小 */}
    :on-success="handleSuccess"
    :before-upload="beforeUpload"
  >
    <i class="el-icon-upload"></i> 选择视频
  </el-upload>
</template>

<script setup>
import { ElUpload } from 'element-plus';

// 检查文件是否可以上传
function beforeUpload(file) {
  if (!file.type.includes('video')) {
    alert('只支持上传视频');
    return false;
  }
  const size = file.size / 1024 / 1024; // MB
  if (size > 5) {
    alert(`文件大小超过5MB`);
    return false;
  }
  return true;
}

// 文件上传成功后的回调
function handleSuccess(response, file) {
  console.log('上传成功', response, file);
}
</script>

3. 父组件传递数据：
如果需要在父组件控制上传状态，可以通过props将变量传给子组件。