开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）:课程管理-添加小节上传视频（前端）】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11408
课程管理-添加小节上传视频（前端）
目录：
一、前端整合添加小节上传视频
二、问题演示
一、前端整合添加小节上传视频
在添加小节基本信息之后，可以上传一个视频到阿里云中，看它的实际需求，目前在线教育就是这样一种方式，找一门课程，找到之后，我们可以看到这里有个目录，就是我们所说的大纲，有它的章节和课时，当我们点击章节的时候，当时显示的是课时，章节中没有视频，而我点击某一个课时，或者小节的时候，它就做出了播放，所以我们每个小节中都有一个对应的视频，我们现在添加课时，或者小节，最后上传视频，在播放的时候，点击课时就能做到播放，跟这个效果是类似的，我们后面会实现出来。
在上传这里要添加一个上传的按钮，然后做上传，而上传按钮我们可以到 mui 中找到相关组件，因为里边有很多组件，那我们就找个组件，组件里面都有，从课件中直接找到，
有个<el-upload，是个上传组件，将组件复制到页面中去，
kel-form-item label="上传视频">
<el-upload
:on-success="handleVodUploadSuccess"
:on-remove-"handleVodRemove"
:before-remove="beforeVodRemove"
:on-exceed="handleUploadExceed"
:file-list-"fileList"
:action="BASE_API+"/admin/vod/video/upload'"
:limit="1"
class="upload-demo">
<el-button size="small" type="primary">
上传视频</el-button>
<el-tooltip placement="right-end">
<div slot="content">最大支持1G，<br>
支持3GP、ASF、AVI、DAT、DV、FLV、F4V、<br>
GIF、M2T、M4V、MJ2、MJPEG、MKV、MOV、MP4、<br> MPE、MPG、MPEG、MTS、OGG、QT、RM、RMVB、<br> SWF、TS、WOB、WMV、WEBM 等视频格式上传
<div><i class="el-icon-question"/>
</el-tooltip>
</el-upload>
</el-form-item>
来到页面中，因为我们的页面是在添加小节的地方，所以我们找到capter页面，打开，找到弹框的地方，找到课时，
找到一个<!-- TODO --> ，所以将
<el-form-item label="上传视频">
<!-- TODO -->
</el-form-item>
复制到上传视频部分，组件复制之后，先看一下再做修改，再来看效果，组件是从mui 中直接复制过来的，所以会多一些步骤，
在<el-upload 中，handleVodUploadSuccess 表示上传成功，remove-"handleVodRemove"是删除
before-remove="beforeVodRemove"是删除之前，
"handleUploadExceed"是上传之前的操作，比如我们设置它的大小包括类型，"fileList"是文件列表，
:on-remove-"handleVodRemove"
:before-remove="beforeVodRemove"
打开 element，找到组件，找一个上传组件，说一下这些组件是什么意思，
:on-success="handleVodUploadSuccess"是上传成功的方法，
当我们在上传视频的时候，下面列出了文件，这个文件是:file-list-"fileList"，
是文件列表，除了它之外，在文件后面还有个×号，点击它的时候我们就能删除了，而我们点击×号就表示调用"beforeVodRemove"，表示删除之前，而删除之前我们要干什么，点击确定的时候，它就会调用"handleVodRemove"这个方法，就是上传成功之后，在原列表中删除把文件删掉，就是我们看到点×弹出个框，点击确定删掉，这就是两个删除方法。
除此之外，还有一个 action，表示请求的后端的接口的地址，这个我们一会改，还有一个limit，允许上传文件的数量，写一个1，就默认一个文件，class="upload-demo">是一个样式，上传视频是一个按钮，
是一个提示信息，给用户一个很好的提示
:on-success="handleVodUploadSuccess"
:on-remove="handleVodRemove"
:before-remove="beforeVodRemove"
:on-exceed="handleUploadExceed"
:file-list="fileList"
:action="BASE_API+“/eduvod/video/ uploadaliyunvideo”
:limit="1"
class="upload-demo">
包括上传成功，删除，删除之前，以及设置，文件列表和API，我们在这里做一个说明，这里我们需要先定几个值，看看它的效果是什么样的，值主要是这个BASE-API，包括fileist，我们都给它们做个定义，直接复制，
fileList: [],//上传文件列表
BASE_API:process.env.BASE_API // 接口 API 地址
将初始值放入我们的 date 中，
dialogChapterFormVisible:false,
//章节弹框 dialogVideoFormVisible:false，//小节弹框
fileList:[],//上传文件列表
BASE API:process.env.BASEAPI // 接口API地址
}，
然后初始值里面有两个，一个是 fileList，一个是 BASE API，fileList 就是文件列表，BASE API 取到你的地址，所以我们现在就写出来了，把路径改一下，改成我们现在的接口路径，
路径是 vod 中的/eduvod/video/，
复制改一下，
将/admin/vod/video/upload'"改为/eduvod/video/upload，后面加上方法名字，uploadaliyunvideo，将 upload 这个改为这个，所以我们现在组件就整合出来了，整合之后，打开页面，进入该页面，
点击添加小节，可以看到：
这里直接点击上传视频，而我们代码中的话就是自动上传，就是现在随便选择一个文件，点击打开，文件就会自动上传，不需要点击其它按钮，
这就是一种自动上传方式，然后我们返回页面中看，这里有一个问号，
我们可以看到，这一步就是提示信息，也就是我们先写到的下面部分，所以做一个提示，
所以我们现在就把组件整合出来了，然后这里有几个值和方法在下面做一个定义，然后最终做一个实现，
//成功回调
handleVodUploadSuccess(response, file, fileList){
this.video.videoSourceId=response.data.videoId
}，
//视图上传多于一个视频
handleUploadExceed(files,fileList){
this.$message.warning("想要重新上传视频，请先删除已上传的视频")}，
此时我们来写一下，第一个是上传成功之后的方法，
methods:{
//上传视频成功调用的方法
handleVodUploadSuccess( response file filelist){
this.video.videosourceid=response.date.videoid
添加一个视频id，接着把 videoid 复制给 video 的对象，赋值之后，我们就可以加到数据库中，这就是我们的一个基本操作，上传之前就简单做个提示，主要是上传之后得到视频 id，给 video，通过它然后可以加到数据库，所以这是一个前端的整合。
},
另外还有一种方法，是上传之前的方法，就是 handleUploadExceed，将这个写一下，删除我们后面再写，因为里面有 videosourceid，那我们做一个赋值，
handleUploadExceed（）{
this.$message.warning("想要重新上传视频，请先删除已上传的视频')
上传之前我们可以做一些设置，简单写一些提示，
this.$message.warning("想要重新上传视频，请先删除已上传的视频')，
在上传成功之后，里边有个参数，是 response，
通过这个我们就能得到接口数据，和之前的写法一样，还有其它值，都可以写，但我们目前只要用 response，把 response file filelist 放入。
}
点击确定，看到小节添加了，然后我们去表里看看小节有没有加进去，
可以看到第一节，删除视频，可以看到视频id，返回id把它加进去了，为686D7，这样我们就可以看到这个：
另外两个方法，一个之前，一个成功，之前我们就简单来个提示，主要是成功，成功之后，需要把视频 id 得到，然后给我们的 video对象加到数据库，这就是前端的整合过程。
二、问题演示
1、需要在 nginx 配置8003端口规则
我们现在使用的是8003端口，所以我们需要在nginx配置8003端口规则，默认是没有的。
找到nginx，cnf，打开配置文件，在这里找到之前加的/eduvod/，8003，
location ~/eduvod/ {
proxy pass http://localhost:8003;
这是第一个，加上一个端口访问规则，就是当你路径中，包含/eduvod/都到8003中去，要注意记得配置。
2、nginx 支持上传大小有限制的
现在我们在访问的不是通过8003，是先通过9001，因为nginx支持上传大小也是有限制的，配置先给它注入，加上配置，重启nginx，关掉不好用，所以我们要找到路径，打开，使用命令先把它停掉，
重新启动，将结果再试一遍，默认是没有配置的，
client max body size 1024m;
进行测试，来到页面中，刷新，刷新之后还是做一个上传，点击添加小节，弹出框。
里面传一个本地的视频，点击打开，我们可以发现问题，此时在页面中没有任何显示，其实它有显示，只不过一闪就消失了，但是在下面出现了错误，
这个问题是由 nginx 出现的，因为我们先访到 nginx，由 nginx 再到我们的8003，这里清楚地告诉我们这个问题，状态码为413，提示我们请求体过大，就是说我们上传的大小超过了 nginx，就不让传过去，报了一个错误，表示请求体过大，所以出现了错误，是一个错误提示，因为 nginx 支持上传大小有限制的。
解决方式就是在 nginx 的配置文件中，添加一个大小设置，这就是它的解决方案，在我的课件中也 写出来了，不需要记忆，直接复制就可以了。
client_max_body_size 1024m;
将这段话应用，找到nginx的配置文件，加到 HTTP 里面就可以了，
http {
include mime.types;
default type application/octet-stream;
client max body size 1024m;
设置成1024m，就是1个g大小，这样只要我们上传的视频在这个区间，那我们的视频就可以上传了，加上之后，我们需要重启一下，
在阿里云中能看到刚上传的视频，时间是符合的，可以做到，最后点击确定，数据就能加到我们的数据库中，这样就完成了，在数据库中可以看到新加的数据，
