vue3+ant-design 上传视频组件

你可以使用 ant-design 的 Upload 组件来上传视频。下面给出一个示例代码：

<template>
  <div>
    <a-upload
      :before-upload="beforeUpload"
      action="/api/upload/video"
      :show-upload-list="false"
    >
      <a-button>
        <a-icon type="upload" /> 选择视频
      </a-button>
    </a-upload>
    <video v-if="videoUrl" :src="videoUrl" controls></video>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videoUrl: '',
    };
  },
  methods: {
    beforeUpload(file) {
      const isVideo = file.type.startsWith('video/');
      if (!isVideo) {
        this.$message.error('只能上传视频文件!');
      }
      const isLt50M = file.size / 1024 / 1024 < 50;
      if (!isLt50M) {
        this.$message.error('视频文件大小不能超过 50MB!');
      }
      return isVideo && isLt50M;
    },
  },
};
</script>

代码解释：

- `before-upload` 属性用于处理文件上传前的验证操作，只有通过验证才会执行上传操作。
- `action` 属性指定上传接口地址。
- `show-upload-list` 属性设置为 `false` 可以隐藏上传列表。
- `videoUrl` 用于存储上传后的视频链接，用于播放视频。
- `beforeUpload` 方法用于验证文件类型和大小，如果不通过验证，则会弹出错误消息。
- `isVideo` 变量用于判断文件类型是否为视频类型。
- `isLt50M` 变量用于判断文件大小是否小于50MB。

上述示例代码中的接口地址 `/api/upload/video` 可以自行替换为自己的上传接口地址。