el-upload只上传视频

### 配置 Element UI `el-upload` 组件以确保只接受视频文件

为了使 `el-upload` 组件仅限于接收视频文件，在组件的属性设置中可以利用 `accept` 属性来指定可接受的文件类型。对于视频文件而言，通常会涉及到 MIME 类型如 video/mp4, video/quicktime (适用于 .mov 文件), 等等。

<template>
  <div>
    <!-- 使用 accept 属性限定上传文件类型 -->
    <el-upload
      class="upload-demo"
      action="https://jsonplaceholder.typicode.com/posts/"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :before-upload="beforeVideoUpload"
      multiple
      :limit="3"
      :on-exceed="handleExceed"
      :file-list="fileList">
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传 mp4/mov 格式的视频文件</div>
    </el-upload>
  </div>
</template>

<script>
export default {
  methods: {
    beforeVideoUpload(file) {
      const isVideo = file.type === 'video/mp4' || file.type === 'video/quicktime';
      const isLt2M = file.size / 1024 / 1024 < 10;

      if (!isVideo) {
        this.$message.error('上传视频只能是 MP4/MOV 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传视频大小不能超过 10MB!');
      }
      return isVideo && isLt2M;
    },
    handleRemove(file, fileList) {},
    handlePreview(file) {},
    handleExceed(files, fileList) {}
  },

  data() {
    return {
      fileList: []
    };
  }
}
</script>

上述代码片段展示了如何通过模板内的 `<el-upload>` 标签以及对应的 JavaScript 方法进一步验证文件类型和大小[^1]。特别注意的是 `before-video-upload` 函数用来做额外的前端校验工作，确保只有符合条件的视频才能被提交给服务器处理[^2]。