开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）:课程管理-添加课程信息前端完善（封面上传）】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11373
课程管理-添加课程信息前端完善（封面上传）
内容介绍
一、Bug 改进
二、图例内容
三、封面上传
四、效果展示
一、Bug 改进
1.bug
在课程分类中选择一级分类为前端开发后，任意选择其二级分类为 vue；再选择后端开发时，会出现本该删除的前端开发中的 vue 仍显示。或是选择 java 之后再选择数据库仍出现该类问题。即每次选择新的一级分类时，二级分类没有清空，导致值仍然存在。
Bug:第一次选择前端开发对应显示出了二级分类 vue，javaScript 和 Jquery，但当选择二级分类为 vue 时，再选择一级分类为后端开发时二级分类的 vue 应该不再存在，但此时却仍存在。同理选择其他时，都存在该问题。
2. 原因
该 bug 是因为 maui 的标签特性，即页面代码48行的 v-model 叫做双向绑定。当你选择值 subjectId 之后对绑定到对应的对象 courseInfo 中去，而下次绑定对象courseInfo 里面的值并没有清空。
l 48行代码
<el-select v-model="courseInfo.subjectId" placeholder="二级分类">
3. 解决方法
只需要把 courseInfo.subjectId 中的 subjectId 作个清空即可，同时注意不能清空courseInfo 因为对象不需要清空，只需将其对应的二级分类 subjectId 清空即可。在页面代码115行在遍历循环获取一级分类里面的所有二级分类时，对二级分类id值做个清空即可。
l 代码如下（红色为添加代码）：
methods:{
//点击某个一级分类,触发change,显示对应二级分类
subjectLevel0neChanged(value) {
//value就是一级分类id值
//遍历所有的分类，包含一级和二级
//采用for（）循环遍历，其中参数不能为int，但可使用var和let，同时注意是.length而不是set因为是数组。
for(var i-e;i
//得到每个一级分类
var oneSubject = subjectoneList[i]
//判断：所有一级分类id和当前点击的一级分类id是否一致
if(value ms= oneSubject.id){
//如果相等，从一级分类获取里面所有的二级分类，因为一级分类的二级分类叫做chlidren，直接.children即可。最后使用this做个赋值。
this.subjectTwoList = oneSubject.children
//把二级分类id值清空
this.courseInfo.subiectId = ‘ ’
}
4. 改进效果显示
添加代码清空后，刷新网页，点击前端开发选择 vue，之后再点击后端开发看到vue 被清空并显示了后端开发对应的二级分类 java 和 c++。
而选择 java 时再改变一级分类为数据库时，java 也会被清空。
至此解决了清空上次点击的二级联动中的内容后，课程分类的二级联动就完全完成。
二、图例内容
l 课程内容下拉列表流程图
l 二级联动实现代码主体：
/点击某个一级分类,触发 change ,显示对应二级分类
subjectLevel0neChanged(value) {
//value 就是一级分类id值
alter(value);
},
//查询所有的一级分类
getOneSubject() {
subject.getSubjectList()
.then( response => {
this.subjectoneList = response.data.list
})
三、封面上传
1.分析
在之前篇章提及的三大功能完善，如今已经实现讲师下拉列表和课程分类，之后讲解对其添加课程封面上传，因为课程封面是一个课程的门面，首先看到课程封面再去看其中的课程标题和内容。所以开始添加课程封面。根据之前使用阿里的OSS上传头像，采用同样技术将封面也上传至 OSS 中去。
在 java 文件夹中找到 com.atguigu.oss 的 controller 中之前编写的 OssController接口，此接口的作用是将其传到 oss 中去，主要是将前端整合起来做一个课程封面上传。
l OssController 代码
@RequestMapping("/eduoss/fileoss") //接口地址
@CrossOrigin
public class 0ssController {
@Autowired
private OssService ossService;
//上传头像的方法
@PostMapping
public R uploadOssFile (MultipartFile file){
//获取上传文件MultipartFile
//返回上传到oss的路径
String url = ossService.uploadFileAvatar(file);
return R.ok().data("url" , url) ;
}
}
在此页面中加一个上传组件，调用之前编写的 OssController 接口来实现封面上传
2. 组件模板
首先在 info.vue 页面中添加上传组件模板。放在70行课程封面位置。
show-file-list 表示显示文件列表，即 Upload 上传中，点击上传后下面会显示出文件名 -food.jpeg 等就是文件列表。而 false 表示不显示此部分内容。
l 代码如下：
<! --课程封面-->
<el-form-item label=“课程封面">
<el-upload
:show-file-list="false"//表示不显示文件列表部分
//handleAvatarSuccess表示上传成功
:on-success="handleAvatarSuccess"
//beforeAvatarUpload表示上传之前
:before-upload="beforeAvatarUpload"
//表示接口地址
:action="BASE_API+’ / admin/oss /file/upload?host=cover ‘"
//class表示样式
class="avatar-uploader">
<img :src="courseInfo.cover">
</el-upload>
< /el-form-item>
同时其中省略的：
auto_uplaod 表示自动化上传，所起的效果：当选择某个文件无需额外点击其他，就可以上传文件。
如：点击01.jpg 图片之后，就会在文件列表中看到其被自动上传成功。
3. 定义 data 数据
复制组件模板代码后，再修改内容值，在页面代码data（）中112行代码。添加定义 BASE_API 的初始值。注意要写在 courseInfo 的外面。
l 代码如下：
BASE_API: process.en.BASE_API//接口API地址
更改78行代码使得BASE_API的路径为oss的接口地址：/eduoss/fileoss，即OssController 代码中可找到。更改完成后，再编写上传成功和上传之前两个方法，在结果回调中详细介绍。
l 红色为更改部分
<! --课程封面-->
<el-form-item label=“课程封面">
<el-upload
:show-file-list="false"//表示不显示文件列表部分
//handleAvatarSuccess表示上传成功
:on-success="handleAvatarSuccess"
//beforeAvatarUpload表示上传之前
:before-upload="beforeAvatarUpload"
//表示接口地址
:action="BASE_API+’ /eduoss/fileoss ‘"//更改路径为oss的接口地址
//class表示样式
class="avatar-uploader">
<img :src="courseInfo.cover">
</el-upload>
< /el-form-item>
4. 结果回调
在124行的 methods 方法中添加上传封面成功调用的方法和上传之前要调用的方法。上传成功后即得到地址作个显示。而上传之前即约定上传的文件类型和大小。
l 代码如下：
//上传成功，res, file 为传过来的两个参数
handleAvatarSuccess(res, file) { //res为response
cons ole.log(res)//上传响应
console.log(URL.create0bjectURL(file.ralw))//base64编码
//把上传之后的地址res.data.url赋给courseInfo中的cover即课程封面
this.courseInfo.cover = res.data.url
},
//上传之前，不设置格式大小也行，但最好做一个规范
beforeAvatarUpload(file){ //参数file表示上传的文件
const isJPG= file.type === "image /jpeg' //文件类型jpeg格式
const isLt2N = file.size / 1024 / 1024 <2
//其为字节单位表示文件大小为2M
if (lisJPG){ //如果文件格式不为jpeg，报错
this.$message.error('上传头像图片只能是JPG格式!)
}
if (!isLt2M) { //如果文件大小不为2M，报错
this.$message. error(上传头像图片大小不能超过2NB!")
｝
return isJPG && isLt2M //若都满足格式和大小条件，直接返回
｝
5.总结：
课程封面上传1.第一步从课件中将课程封面的组件复制到页面代码中，其上传的接口地址改为oss的接口地址：/eduoss/fileoss，
2. 更改完成后再在 method 中添加 beforeAvatarUpload 方法设置上传文件大小和类型，
3.最后 handleAvatarSuccess 方法中得到上传之后的地址 res.data.url 赋给courseInfo 中的 cover 即课程封面。
四、效果展示
因为要上传，启动 edu 和 oss 两个接口，等待启动完成。来到页面中，会发现课程封面一栏为空，在此是因为采用了自动上传的组件，因而导致课程封面未显示任何图案，为了美观效果，可以添加默认封面。
1. 添加默认封面
将选中的封面图片01.jpg 添加至 static 中（如图效果）
添加方法为打开电脑内 static 存放的路径，将图片添加进去。
E 盘的 work->vs1010->vue-admin-1010->static
添加成功后，给109行的 cover 添加默认值，即图片所存的路径：
l 代码如下：
cover:' /static/01.jpg' ,
修改完成后就可以看见，课程封面显示对应选择的默认封面图片，而点击图片就会显示选择上传文件的弹窗。
同时要更换默认封面为02.jpg 时只需要点击默认图片，就可以在弹窗中选择需要更换的封面图片，选中图片02.jpg 然后打开。即可调接口最终实现更换。此时封面是传到了 OSS 中，利用其返回的地址做一个显示。
