ant design vue + jeecgboot 实现本地上传视频及播放视频功能

<template>
  <a-upload
    :action="uploadAction"
    :headers="uploadHeaders"
    :before-upload="beforeUpload"
    @change="handleChange">
    <a-button> <a-icon type="upload" /> 本地上传 </a-button>
  </a-upload>
  <video v-if="videoUrl" :src="videoUrl" controls style="margin-top: 10px;"></video>
</template>
 
<script>
export default {
  data() {
    return {
      uploadAction: '/jeecg-boot/sys/common/upload', // 上传的接口地址
      uploadHeaders: { authorization: 'Bearer ' + this.$ls.get('ACCESS_TOKEN') }, // 上传的请求头
      videoUrl: '' // 视频播放地址
    };
  },
  methods: {
    beforeUpload(file) {
      const isVideo = file.type === 'video/mp4';
      if (!isVideo) {
        this.$message.error('只能上传mp4格式的视频!');
      }
      return isVideo || Upload.abort;
    },
    handleChange({ file, fileList }) {
      if (file.status === 'done') {
        this.videoUrl = file.response.message; // 假设响应中包含视频地址
      }
    }
  }
};
</script>

这段代码使用了Ant Design Vue的<a-upload>组件来上传视频，并在上传成功后通过handleChange方法来处理响应，并更新视频播放地址。beforeUpload方法用于检查上传的文件是否为mp4格式，不是则阻止上传。在<video>标签中使用了v-if指令来控制视频的渲染，当videoUrl有值时，显示视频播放器。这个例子简洁明了，展示了如何在JeecgBoot项目中实现视频上传及播放的功能。