element-ui 上传视频

为了实现element-ui上传视频，需要进行以下步骤：

1.在HTML文件中添加el-upload组件，设置action属性为上传视频的URL地址，设置before-upload属性为一个函数，用于在上传视频之前进行格式、大小、时长的限制。

2.在Vue实例中定义beforeUpload函数，该函数接收一个file参数，用于判断视频格式、大小、时长是否符合要求。如果符合要求，返回true，否则返回false。

3.在CSS文件中定义上传组件的样式，包括边框、光标、字体大小、颜色等。

下面是一个示例代码，用于实现element-ui上传视频：

<template>
  <el-upload
    class="upload-demo"
    action="/upload"
    :before-upload="beforeUpload"
    :on-success="handleSuccess"
    :on-error="handleError"
    :file-list="fileList"
    multiple>
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">只能上传mp4格式的视频，且不超过100MB，时长不超过10分钟</div>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      fileList: []
    };
  },
  methods: {
    beforeUpload(file) {
      const isMp4 = file.type === 'video/mp4';
      const isLt100M = file.size / 1024 / 1024 < 100;
      const video = document.createElement('video');
      const URL = window.URL || window.webkitURL;
      video.src = URL.createObjectURL(file);
      return new Promise((resolve, reject) => {
        video.onloadedmetadata = () => {
          if (isMp4 && isLt100M && video.duration <= 600) {
            resolve();
          } else {
            reject('上传视频格式、大小或时长不符合要求');
          }
        };
      });
    },
    handleSuccess(response, file, fileList) {
      console.log(response, file, fileList);
    },
    handleError(err, file, fileList) {
      console.log(err, file, fileList);
    }
  }
};
</script>

<style>
.upload-demo {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.upload-demo:hover {
  border-color: #409EFF;
}
.el-upload__tip {
  font-size: 14px;
  color: #606266;
  margin-top: 10px;
}
</style>