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

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


上传视频

1. 上传按钮事件

  1. 点击上传按钮事件 --这个地方为案例,我就简单使用了一个a标签
<a @click="uploadVideo(record)">上传视频</a>

2. 上传按钮触发

  1. 点击上传按钮触发,打开上传视频弹窗
    record当前点击列表中的哪一行,把数据传过来
uploadVideo(record) {
  console.log('record', record)
  this.assessment = record
  this.visible_uploadVideov = true
},

3. 声明变量visible_uploadVideov

  1. 在data return下声明变量visible_uploadVideov
visible_uploadVideov: false, //默认为false关闭状态

4. 上传视频弹窗

  1. 上传视频弹窗代码如下
<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. 保存视频

  1. 将上传的视频路径保存到数据库的assessment.assessmentVideo这个字段下
  2. 点击保存按钮,触发保存上传视频方法,说白了就是去更新assessment.assessmentVideo字段值
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. 关闭上传视频弹窗

uploadVideovCancel() {
    this.visible_uploadVideov = false
 },

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

播放视频

1. 获取上传后的视频

  1. 上传后的视频我是在列表中进行显示,使用插槽进行处理
{
  title: '视频',
  align: 'center',
  dataIndex: 'assessmentVideo',
  scopedSlots: {customRender: 'assessment_videoSlot'},
  },

1.1 插槽

  1. 插槽代码如下
    这段代码的意思是,如果assessmentVideo这个字段也就是text有值的话呢显示一个svg的图标,并添加了一个playVideo事件
<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. 触发播放视频事件

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

3. 播放视频弹窗

视频存放地址

上传视频Api地址

根据你的地址替换一下

<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. 暂停视频

disposeVideo() {
  this.$refs.videoPlayer.pause();
},
目录
相关文章
|
8天前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
103 2
|
3月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
529 0
|
2月前
|
JavaScript 安全
在 Vue 中,如何在回调函数中正确使用 this?
在 Vue 中,如何在回调函数中正确使用 this?
104 0
|
2月前
|
人工智能 JSON JavaScript
VTJ.PRO 首发 MasterGo 设计智能识别引擎,秒级生成 Vue 代码
VTJ.PRO发布「AI MasterGo设计稿识别引擎」,成为全球首个支持解析MasterGo原生JSON文件并自动生成Vue组件的AI工具。通过双引擎架构,实现设计到代码全流程自动化,效率提升300%,助力企业降本增效,引领“设计即生产”新时代。
232 1
|
5月前
|
JavaScript
vue实现任务周期cron表达式选择组件
vue实现任务周期cron表达式选择组件
748 4
|
3月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
|
4月前
|
JavaScript 数据可视化 前端开发
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑,结合D3强大的数据可视化能力,实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展(如节点类型定制、连接样式优化等),并提供了性能优化方案以应对大数据量场景。最终,展示了基础网络拓扑、实时更新拓扑等应用实例,为开发者提供了一套完整的实现思路和实践经验。
531 77
|
5月前
|
缓存 JavaScript 前端开发
Vue 基础语法介绍
Vue 基础语法介绍
|
3月前
|
JavaScript 前端开发 开发者
Vue 自定义进度条组件封装及使用方法详解
这是一篇关于自定义进度条组件的使用指南和开发文档。文章详细介绍了如何在Vue项目中引入、注册并使用该组件,包括基础与高级示例。组件支持分段配置(如颜色、文本)、动画效果及超出进度提示等功能。同时提供了完整的代码实现,支持全局注册,并提出了优化建议,如主题支持、响应式设计等,帮助开发者更灵活地集成和定制进度条组件。资源链接已提供,适合前端开发者参考学习。
362 17