课程管理-添加小节上传视频(完善) | 学习笔记

简介: 简介:快速学习课程管理-添加小节上传视频(完善)

开发者学堂课程【微服务+全栈在线教育实战项目演练(SpringCloud Alibaba+SpringBoot):课程管理-添加小节上传视频(完善)】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/667/detail/11407


课程管理-添加小节上传视频(完善) 

 

目录:

一、视频名称存储到数据库表

二、修改前端,在前端中做个赋值

三、删除视频


一、视频名称存储到数据库表

1.添加 edu

首先,我们需要先添加这一种,即edu。

在 edu 中找到 Edu Video 文件,在这里,videoSourcel 的属性是视频的 ID,video OriginalName 的属性就是视频名称。

所以现在内容,数值都有,通过前端给它改一下。

(1)在 video 中,有如下几个属性,我们可以加个属性,

video:{

title:'',

sort:0,

free:0,

video Source Id:'',

video Original Name:''//视频名称

}

这个可以表示上传成功后的操作,我们可以看到,我们将 videoID 赋值给videosourceID,

//上传视频成功调用的方法

handleVodUploadSuccess(response,,fileList){

this.video. videoSource Id= respon se. date.videoId

},

 

二、修改前端,在前端中做个赋值

把上传之后的视频名称给这个 videoname 的过程写出来,

methods:{

//上传视频成功调用的方法

handleVodUploadSuccess(response, file, fileList) {

//上传视频id赋值

this.video.videoSourceId = response.data.videoId

//上传视频名称赋值

this.video.videoOriginalName = file.name

}

视频名称该怎么取到,

有多种方式,第一种方式是,可以改接口,通过接口,把名称做个返回,我们是可以做到的,但为了避免麻烦,只需要返 ID,那名称怎么做到?

我们可以发现 response 得到接口数据,file 表示当前你上传的文件,通过file,可以得到文件的名称,可以看到组件中,有个代码,写法就是 file.name,通过它,就能得到名称,所以写一个 file.name,就可以得到。得到文件名称之后,给这个video 对象,在添加之后,我们的表中就有这个视频名称了。就是这样一个改进,自我修改的办法。

image.png

通过 file,得到文件名称,把它给 video 对象,最终我们在数据库中就会有数据,

 

三、删除视频

除此之外,还有一个细节功能,来到页面中,在里边上传一个视频,上传完视频以后,如果觉得视频传的不对,要怎样把视频删掉,在视频后面有个叉号,点击这个叉就可以把这个视频删掉,但是删视频并不代表这个页面就没有了,阿里云视频也要同时删掉,我们按照组件中的做法,看到这里有两个方法,

首先,找到 beforevodremove,表示删除之前,在我们点击叉号之前,使用这个方法,在这一部分中就会弹出一个框,

image.png

类似于我们上面看到的这个框,当我们点击确定的时候,它就会调用里面的这个方法 beforevodremove,在这个方法中,我们可以在后面写一个接口,调接口根据视频 ID,视频我们就可以删掉。

我们目前还缺少这个功能,就是上传之后我们可以去删除视频,所以我们后面再慢慢完善。

相关文章
|
XML SQL 前端开发
谷粒学院(十一)课程最终发布 | 课程列表 | 阿里云视频点播服务 | 小节实现视频上传(一)
谷粒学院(十一)课程最终发布 | 课程列表 | 阿里云视频点播服务 | 小节实现视频上传
谷粒学院(十一)课程最终发布 | 课程列表 | 阿里云视频点播服务 | 小节实现视频上传(一)
|
前端开发 JavaScript API
谷粒学院(十一)课程最终发布 | 课程列表 | 阿里云视频点播服务 | 小节实现视频上传(三)
谷粒学院(十一)课程最终发布 | 课程列表 | 阿里云视频点播服务 | 小节实现视频上传(三)
谷粒学院(十一)课程最终发布 | 课程列表 | 阿里云视频点播服务 | 小节实现视频上传(三)
|
存储 编解码 前端开发
谷粒学院(十一)课程最终发布 | 课程列表 | 阿里云视频点播服务 | 小节实现视频上传(二)
谷粒学院(十一)课程最终发布 | 课程列表 | 阿里云视频点播服务 | 小节实现视频上传
谷粒学院(十一)课程最终发布 | 课程列表 | 阿里云视频点播服务 | 小节实现视频上传(二)
|
前端开发 数据建模 应用服务中间件
课程管理-添加小节上传视频(前端) | 学习笔记
简介:快速学习课程管理-添加小节上传视频(前端)
218 0
课程管理-添加小节上传视频(前端) | 学习笔记
|
前端开发 JavaScript Java
课程管理-添加课程信息前端完善(封面上传) | 学习笔记
简介:快速学习课程管理-添加课程信息前端完善(封面上传)
166 0
课程管理-添加课程信息前端完善(封面上传) | 学习笔记
|
对象存储 开发者 微服务
讲师管理-上传讲师头像(后端接口完善) | 学习笔记
快速学习讲师管理-上传讲师头像(后端接口完善)
讲师管理-上传讲师头像(后端接口完善) | 学习笔记
|
前端开发 JavaScript Java
课程管理-添加课程信息前端完善(显示分类) | 学习笔记
简介:快速学习课程管理-添加课程信息前端完善(显示分类)
184 0
课程管理-添加课程信息前端完善(显示分类) | 学习笔记
|
人工智能 Java 开发者
课程管理-课程发布流程说明 | 学习笔记
快速学习课程管理-课程发布流程说明
课程管理-课程发布流程说明 | 学习笔记
|
前端开发 API 数据库
课程管理-添加小节 | 学习笔记
简介:快速学习课程管理-添加小节
192 0
课程管理-添加小节 | 学习笔记
|
前端开发 Java 测试技术
课程管理-添加课程信息前端完善(显示讲师) | 学习笔记
简介:快速学习课程管理-添加课程信息前端完善(显示讲师)
163 0
课程管理-添加课程信息前端完善(显示讲师) | 学习笔记
下一篇
无影云桌面