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

文章目录

上传视频
- [1. 上传按钮事件](#1. 上传按钮事件)
- [2. 上传按钮触发](#2. 上传按钮触发)
- [3. 声明变量visible_uploadVideov](#3. 声明变量visible_uploadVideov)
- [4. 上传视频弹窗](#4. 上传视频弹窗)
- [5. 保存视频](#5. 保存视频)
- [6. 关闭上传视频弹窗](#6. 关闭上传视频弹窗)
播放视频
- [1. 获取上传后的视频](#1. 获取上传后的视频)
- [1.1 插槽](#1.1 插槽)
- [2. 触发播放视频事件](#2. 触发播放视频事件)
- [3. 播放视频弹窗](#3. 播放视频弹窗)
- [4. 暂停视频](#4. 暂停视频)

上传视频

1. 上传按钮事件

点击上传按钮事件 --这个地方为案例，我就简单使用了一个a标签

java 复制代码

<a @click="uploadVideo(record)">上传视频</a>

2. 上传按钮触发

点击上传按钮触发，打开上传视频弹窗
record当前点击列表中的哪一行，把数据传过来

java 复制代码

uploadVideo(record) {
  console.log('record', record)
  this.assessment = record
  this.visible_uploadVideov = true
},

3. 声明变量visible_uploadVideov

在data return下声明变量visible_uploadVideov

java 复制代码

visible_uploadVideov: false, //默认为false关闭状态

4. 上传视频弹窗

上传视频弹窗代码如下

java 复制代码

<a-modal v-model="visible_uploadVideov" title="上传视频" :footer="null" :width="600">
  <a-form-model :label-col="{ span: 4 }" :wrapper-col="{ span: 14 }">
	<a-form-model-item label="点击上传视频：">
	  <j-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" :multiple="true"
				v-model="assessment.assessmentVideo">
		<a-button>
		  <a-icon type="upload"/>
		  上传
		</a-button>
	  </j-upload>
	</a-form-model-item>
	<a-form-model-item :wrapper-col="{ span: 14, offset: 9 }">
	  <a-button @click="uploadVideovCancel"> 取消</a-button>
	  <a-button type="primary" @click="uploadVideovSubmit" style="margin-left: 10px"> 保存</a-button>
	</a-form-model-item>
  </a-form-model>
</a-modal>

5. 保存视频

将上传的视频路径保存到数据库的assessment.assessmentVideo这个字段下
点击保存按钮，触发保存上传视频方法，说白了就是去更新assessment.assessmentVideo字段值

java 复制代码

uploadVideovSubmit() {
  postAction('/chx/chxAssessmentRecord/edit', this.assessment).then((res) => {
	console.log('res', res)
	if (res.success) {
	  this.$message.success('保存成功!')
	} else {
	  this.$message.error('保存失败!')
	}
	this.visible_uploadVideov = false
  })
  this.loadData()//调用查询方法刷新页面
},

6. 关闭上传视频弹窗

java 复制代码

uploadVideovCancel() {
  	this.visible_uploadVideov = false
 },

以上是上传视频案例，下面来分享如何播放上传的视频

播放视频

1. 获取上传后的视频

上传后的视频我是在列表中进行显示，使用插槽进行处理

java 复制代码

{
	title: '视频',
	align: 'center',
	dataIndex: 'assessmentVideo',
	scopedSlots: {customRender: 'assessment_videoSlot'},
  },

1.1 插槽

插槽代码如下
这段代码的意思是，如果assessmentVideo这个字段也就是text有值的话呢显示一个svg的图标，并添加了一个playVideo事件

java 复制代码

<span slot="assessment_videoSlot" slot-scope="text, record">
<template v-if="text != null">
  <a @click="playVideo(text)">
	<svg t="1672388588867" class="icon" viewBox="0 0 1024 1024" version="1.1"
		 xmlns="http://www.w3.org/2000/svg" p-id="2538" width="20" height="20">
	  <path
		d="M512 64c126.72 3.328 232.192 47.168 316.48 131.456C912.832 279.872 956.672 385.344 960 512c-3.328 126.72-47.168 232.192-131.52 316.48C744.192 912.832 638.72 956.672 512 960c-126.72-3.328-232.192-47.168-316.544-131.52C111.232 744.192 67.392 638.72 64 512c3.328-126.72 47.168-232.192 131.456-316.544C279.872 111.232 385.344 67.392 512 64z m0 832c108.672-2.688 199.168-40.192 271.488-112.512S893.312 620.672 896 512c-2.688-108.672-40.192-199.168-112.512-271.488S620.672 130.688 512 128c-108.672 2.688-199.168 40.192-271.488 112.512S130.688 403.328 128 512c2.688 108.672 40.192 199.168 112.512 271.488S403.328 893.312 512 896z m-48-248L668.992 512 464 376v272z m11.008-341.952l248.96 165.952a46.848 46.848 0 0 1 21.056 40.064c0 16.64-7.04 29.952-21.056 40l-248.96 166.016a47.936 47.936 0 0 1-24.96 8.448 45.248 45.248 0 0 1-24.512-6.016 51.84 51.84 0 0 1-18.56-17.472 45.76 45.76 0 0 1-6.976-24.96V346.048a45.44 45.44 0 0 1 7.04-24.96 52.16 52.16 0 0 1 18.432-17.536c7.68-4.352 15.872-6.4 24.576-6.016 8.64 0.32 16.96 3.2 24.96 8.512z"
		fill="#0ebaaa" p-id="2539">
	  </path>
	</svg>
  </a>
</template>
<template v-else>
  <svg t="1672388588867" class="icon" viewBox="0 0 1024 1024" version="1.1"
	   xmlns="http://www.w3.org/2000/svg"
	   p-id="2538" width="20" height="20">
	<path
	  d="M512 64c126.72 3.328 232.192 47.168 316.48 131.456C912.832 279.872 956.672 385.344 960 512c-3.328 126.72-47.168 232.192-131.52 316.48C744.192 912.832 638.72 956.672 512 960c-126.72-3.328-232.192-47.168-316.544-131.52C111.232 744.192 67.392 638.72 64 512c3.328-126.72 47.168-232.192 131.456-316.544C279.872 111.232 385.344 67.392 512 64z m0 832c108.672-2.688 199.168-40.192 271.488-112.512S893.312 620.672 896 512c-2.688-108.672-40.192-199.168-112.512-271.488S620.672 130.688 512 128c-108.672 2.688-199.168 40.192-271.488 112.512S130.688 403.328 128 512c2.688 108.672 40.192 199.168 112.512 271.488S403.328 893.312 512 896z m-48-248L668.992 512 464 376v272z m11.008-341.952l248.96 165.952a46.848 46.848 0 0 1 21.056 40.064c0 16.64-7.04 29.952-21.056 40l-248.96 166.016a47.936 47.936 0 0 1-24.96 8.448 45.248 45.248 0 0 1-24.512-6.016 51.84 51.84 0 0 1-18.56-17.472 45.76 45.76 0 0 1-6.976-24.96V346.048a45.44 45.44 0 0 1 7.04-24.96 52.16 52.16 0 0 1 18.432-17.536c7.68-4.352 15.872-6.4 24.576-6.016 8.64 0.32 16.96 3.2 24.96 8.512z"
	  fill="#bdbfbf" p-id="2539"></path>
  </svg>
</template>
</span>

2. 触发播放视频事件

java 复制代码

playVideo(text) {
  this.videoSrc = this.videoSrc += text
  console.log('this.videoSrc==========>', this.videoSrc)
  this.playVideoVisible = true
},

3. 播放视频弹窗

视频存放地址
上传视频Api地址

根据你的地址替换一下

java 复制代码

<a-modal v-model="playVideoVisible" title="播放视频" :width="800"
  @cancel="disposeVideo">
  <video width="100%" v-if="playVideoVisible" height="400" controls ref="videoPlayer">
	<source :src="'视频存放地址' + videoSrc" type="video/mp4">
	<source :src="'上传视频Api地址' + videoSrc" type="video/mp4">
  </video>
</a-modal>

4. 暂停视频

java 复制代码

disposeVideo() {
  this.$refs.videoPlayer.pause();
},