开发者学堂课程【微服务+全栈在线教育实战项目演练(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 对象,在添加之后,我们的表中就有这个视频名称了。就是这样一个改进,自我修改的办法。
通过 file,得到文件名称,把它给 video 对象,最终我们在数据库中就会有数据,
三、删除视频
除此之外,还有一个细节功能,来到页面中,在里边上传一个视频,上传完视频以后,如果觉得视频传的不对,要怎样把视频删掉,在视频后面有个叉号,点击这个叉就可以把这个视频删掉,但是删视频并不代表这个页面就没有了,阿里云视频也要同时删掉,我们按照组件中的做法,看到这里有两个方法,
首先,找到 beforevodremove,表示删除之前,在我们点击叉号之前,使用这个方法,在这一部分中就会弹出一个框,
类似于我们上面看到的这个框,当我们点击确定的时候,它就会调用里面的这个方法 beforevodremove,在这个方法中,我们可以在后面写一个接口,调接口根据视频 ID,视频我们就可以删掉。
我们目前还缺少这个功能,就是上传之后我们可以去删除视频,所以我们后面再慢慢完善。