el-upload上传视频并回显

`el-upload` 是 Element UI 提供的一个用于文件上传的功能组件，非常适合在前端处理视频上传操作。在使用过程中，你可以设置它来上传视频文件，并在上传完成后显示或处理上传的视频。以下是一个基本的使用示例：

<template>
  <el-upload
    ref="upload"
    :action="uploadUrl" // 你需要将这个属性指向你的后端接收文件的URL
    :accept="'.mp4,.avi,.mov'" // 可以在这里指定支持的视频格式
    :before-upload="beforeUpload" // 在上传前调用的函数
    :on-success="handleSuccess" // 上传成功后的回调
    :on-error="handleError" // 上传失败后的回调
    :file-list="videoFiles" // 存储已上传文件的列表
    :auto-upload="false" // 是否自动上传，默认为true，这里设为false以便控制
  >
    <i class="el-icon-upload"></i> <el-button>点击上传视频</el-button>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      uploadUrl: 'your-api-url', // 请替换为你的后端接口 URL
      videoFiles: [], // 用来存储上传的视频文件对象
      beforeUpload(file) {
        // 在这里可以检查文件类型、大小等，如需限制
        const isVideo = ['video/mp4', 'video/quicktime'].includes(file.type);
        if (!isVideo) {
          this.$message.error('仅支持上传视频文件！');
          return false;
        }
        return true; // 如果验证通过，返回true
      },
      handleSuccess(res, file) {
        // res 是服务器返回的数据，file 是上传的文件对象
        this.videoFiles.push(file);
        console.log('文件上传成功', file);
      },
      handleError(err, file) {
        console.error('文件上传失败', err, file);
      },
    };
  },
};
</script>