element如何上传视频并预览

在Element UI中，上传视频并预览可以借助其内置的`el-upload`组件来完成。以下是基本步骤：

1. 引入组件：首先在Vue项目中引入Element UI所需的`el-upload`组件。

<script src="https://unpkg.com/element-ui/lib/index.js"></script>

2. 创建上传组件：在模板上创建一个`el-upload`元素，设置必要的属性如`action`（上传地址）、`onSuccess`（上传成功回调）以及处理文件的选择、上传状态等。

<el-upload
  action="your-upload-url"
  :before-upload="beforeUpload"
  :file-list="fileList"
  :on-success="handleSuccess"
>
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">点击上传</div>
  <div class="el-upload__tip" slot="tip">只能上传不超过5M的视频</div>
</el-upload>

- `before-upload`: 预处理文件，比如检查大小、格式等。
- `fileList`: 存储上传进度的数组，用于显示已上传文件列表。
- `handleSuccess(file, response)`: 上传成功后的回调函数，通常会在这里接收服务器返回的数据，并预览。

3. 添加预览功能：如果服务器支持，可以在成功回调中获取到视频URL，然后使用HTML5的`<video>`标签预览。

methods: {
  beforeUpload(file) {
    if (file.size > 5 * 1024 * 1024) { // 检查是否超过5MB
      return false;
    }
    return true;
  },
  handleSuccess(file, response) {
    if (response.url) { // 如果有url字段，则可以用它来显示预览
      this.fileList.push({
        name: file.name,
        url: response.url,
        status: 'success',
        // 其他信息...
      });
      // 在这里可以动态插入一个video标签预览，例如：
      const video = document.createElement('video');
      video.src = response.url;
      // ...其他视频元素配置，如宽度、高度等
      document.body.appendChild(video);
    }
  }
}