day07【课程发布-添加课程信息】/15-尚硅谷-谷粒学院-课程管理-添加课程信息前端完善（封面上传）

就刚才这个效果做到了啊，然后咱们来试一下啊，看里边有一个小问题啊，比如现在我点前端开发，再点个vuee。一级二级没有错，比如现在我再选一个叫后端开发，然后我再一点。大家看一个问题啊，我可是否看到啊，我再点后端的时候，你看啊，Voe这个值是不是应该是去掉了，要显示不是里边内容，比如现在我在选个Java。然后我选个数据库。各位看到问题了吧，也就是说啊，我每次在选择新的一的时候，你这个二级并没有清空，里边还有值存在，就它里面还有。不是，各位是否能看懂啊，我再演示一遍，这是一个bug啊，我选就是第一次肯定没有错，我选前端里边多那种，假如我选个vuee。这个是一级二级，但我现在啊，我选个后端，它正确效果应该是啊，选后端之后Vue应该不存在了，但是你看目前是不是还有。

然后这里边才是你具体内容，当我在选别的东西，它上下的东西还存在，就是这个没有清空，但是里边内容是有的，是对的，那这是一个小bug，来给他解决一下啊。怎么解决呢？主要是一个地法，它就是那个。本身这个UI那个标签的一个特点。什么特点呢？大家看个地方啊，就是这个地方。往上找。这里边有一个叫VGA model。这个地方V-model什么意思，是不是叫双向绑定了，就当你里边这个值你选择它会绑定到这个对象中去，而你再一点它这个对象中的值其实是没有清空的，那咱怎么做呢？每次点个新的一分类的时候，你把这值做个清空就可以了，但你清空的不能清空cos info，因为它对象不需要清空，咱只需要把这个值清，就是你的二级分类值清空就可以了，它这值就是你上一次没有清空。

那咱们就改一下啊，就来到这个位置，每次改变之后。我小下边啊。咱就是把那个二级分类的ID值给它就清空一下就可以了。加上一个叫这点这个值。等一个空啊。要不然他还会有上层的一个数据表单就没有清空掉啊，就是这么一个东西啊，那咱们再试一下啊。这个保存了啊，然后来到页面中我刷新。点击一级分类，前端开发选VE，这步没有错，我再选个后端。大家看。这效果是不是对了，Vouee不存在了，然后是Java，我再选个数据库是不是没了，里边是这个my circle主要这个特点啊，所以咱们把这个我们就完成了啊。关于。课程分类的这个二级联动，这是一个小bug啊，各位能给他看到，就你每次改变一分类，需要手动把二级分类的值给它清空一下，你不清空的还显示上次那个数据。

这个啊，是咱们最终做到的啊。主要就是里边的。这段代码啊，这是我们要说的一个重点部分，所以各位多花点时间把这个代码好好去写写啊，咱后面也会写到类似这种代码。这在前端中应该是比较常见的这么一部分。啊，就是这个代码。首先啊。所以咱们这个完成了啊，然后这个完成之后呢，咱们在这个功能里边呢，刚才咱是两个完善，一个是讲师，一个是课程分类，然后都完善之后呢，后面还要完善，但今天咱做完了啊，咱就大概看能做一小部分啊，然后还有什么完善的，就是下一个完善在里边呢，咱就可以在这个位置啊，加上一个就是课程封面的上传，因为一个课程中呢。

肯定会有封面，而一个封面也是课程一个标志，别人看课程第一眼看到肯定是一个封面，然后才是你的名称，才是你的具体内容啊，所以咱们在里边肯定有个封面，那咱们下面把这封面我们给他弄一下啊。那封面怎么做呢？首先第一个咱们在应该是前一天的内容中呢，讲到过一个叫阿林的oss，当时咱的头像是不是就传到了OS中去了，所以现在咱这个封面也能传到OS中去啊，那那个oss接口我就不改了，还是用之前那个，因为之前就能传过来，也就是在里边的这个接口。大家看一下啊，就是他。这接口是传到OS中去，所以咱们还用它，但是现在咱主要是把前端整合出来，做一个课程的风险上传，也就是在我们的这个页面中加上一个上传组件，调用咱们之前写接口把这做到啊，这是课程风险上传，那咱们来快速整合出来啊。

直接啊，从里边复制我们那个页面部分，然后咱们做那个调用在页面部分呢，首先呢，咱肯定是加这么一个就是上传的组件，就是这个组件，我把它直接就复制过来。然后这个组件呢，咱就放到我们这个info页面中，那个课程封面位置，课程封面我这里边加了注释这段注释这位置放一个上传组件。这组件啊，各位直接复制改就可以了，然后咱看一下这个组件什么意思啊。首先我们看第一部分啊，这个东西。它叫做受fair等于false。什么意思呢？显示文件列表，也就是说啊，咱到这里边看一下啊，咱找一个上传。

大家看这位置啊，但我现在上传文件在这里面是不是有显示啊，这叫文件列表，而我现在不让它显示，你把值改成就是false，就是里边就不显这个东西，这是第一个。然后里边第二个这好理解，就是你上传成功，这个是上传之前，包括这是你的那个接口地址啊，这是我们的样式，但是这个上传有的地方是省略了，就是这个地方。不知各位是否记得啊，我写一下。这个名字叫o to upload。对，咱之前说过啊，自动上传，而目前这个组件做的效果是一个自动上传功能，也就是说你不需要再额外点按钮，当你选择某个文件，它就会给我们做到一个自动上传，就类似于这种情况。点一个效果，你看现在我一选，然后这个文件就会自动上上来。就这么一种结构啊，这是我们用的一个组件，给大家把这个直接复制改就可以了，然后这个复制之后，咱们把里边的内容改一下，首先里边有第一个值是一个叫base API是取咱那个local house901那个地址，那这个咱来一个初始值。

啊，就是这个地方啊，直接复制过来，之前都写过的啊。先定义它这么一个初始值。还是我强调的这些值啊，你别写错位置，别写到Co info中，写到外面去。然后定义之后，这路径改成咱们那个osi那个接口地址，这接口地址我到里边咱就复制一下。啊，就是这个地址。EDUOSSOSS。把这个咱就。过来啊，咱就用之前那个接口给它用成一样的啊。咱来看一下，就是它这个没有错啊，然后这个选完之后。在这里边呢，有两个方法，一个是上传成功，一个叫上传之前，所以咱们最后来写这两个方法，就是一个上传成功，一个上山之前啊，这两个基本方法，那这个啊，我来写一下啊。

我再写一遍啊，首先有一个上传成功。这个位置。就是你上传。封面。成功。调用的方法，它就是这个方法。然后还有一个是上传之前要调的方法。上传之前。我们调用方法，那这个方法我这里边写的是这个名字叫before a waterload啊，这是之前的这个方法，当然这个名字你可以改啊，我就用这个名字了。然后这里边什么意思呢？给大家说一下啊，就是上传成功好理解，上传成功之后咱可以得到地址，然后做个显示，而上传之前咱干什么呢。

我强调，比如我现在。一般来讲，在上传之前，咱一般就是做这么件事情，比如现在我约定我只能传什么格式的这个文件，或者说我现在约定我这个文件大小是多大，比如我大小规定是两兆，超过两兆不能传上去，这是上传之前一般做的事情，规定你的文件类型和文件大小，上传成功之后，咱一般是得到它的地址啊，这是两个方法，那我们来写一下啊。这个我就复制了啊，这是上传之前，这里边有一段固定代码，好直接拿过来啊，然后里边可以传个参数叫five，就是你的文件。那咱看这代码什么意思啊。首先两个地方，第一个就是文件的类型，第二个是文件大小，就是类型是一个PPT格式，大小是一个两兆，因为这是字节单位，它是两兆，当你的类型不是这个类型，大小不是这么大，那都会报错，如果是的话，给它直接返回，这是上传之前做的事情啊，就设置一个这个操作，或者你不设置也可以直接传就可以，但是一般我们建议做个设置，要么类型，要么大小。

然后做到之后，最后是成功，成功之后呢，我们肯定是得到里边那个地址，把地址得到啊，那我们来写一下啊，在这个方法中呢，也可以有两个参数。把这参数拿过来啊，一个叫res，一个叫res，就是咱说那个response。那我来一个AUL，然后把这个就是上传之后的地址赋值给这个就是。Course info中这个cover就是你那个课程封闭。写下啊，点上这个cover。等于这个值。啊，复制一下啊，省得我写错。就是他。所以这样的话，这个封面上传我们就最终整出来了，处理过程。

它的过程就是第一步咱从课件中把这个组件复制过来，然后你改它那个上传到接口地址，改完之后两个方法，一个上传之前咱设置大小和这个类型，或者说你不设置直接返回也可以，然后第二个就是上传成功，我们就是得到它的地址给这个code info cover，因为cover最终这里边会做个显示。主要这个啊，然后它里面参数是它给我们自动传过来的一个fair res，这里边应该指定的res，这是代表那个文件。这个啊，我们就做到了啊，然后做到之后，最后效果再来试一下啊。来到这个位置啊。Edu启动了oss，我们再启动。就是两个接口都需要启动。因为咱要上传。最后啊，我们试一下啊，等它先停起来。都启用之后，咱们把最终的效果我们来看一下。

这个可以了啊，Edu也可以做到了，然后咱们前端也启动了，最后来到我们的E面中，在页面中呢，我们看到啊，就是在这个位置呢，如果说我们这么做的话，有个小问题啊，咱看这里边那个课程封面的地方。这个位置好像没有东西啊，因为现在呢，这个组件做到效果是一个叫做自动上传，所以咱们一般来讲啊，为了效果更加明显，或者说为了用户体验更加好。咱可以给这封面写一个叫做默认的封面，就让它效果更明显啊，加个默认封面，为了它有那个效果，那我就加一个啊，比如默认封面呢，咱就加上。这个吧，是咱之前写这个啊，呃，我就加到S中，咱就给它加一个图片。是一个啊，比如说我就加上呃，就这个吧，零一.jpg。放到我们这里边来啊。

加个默认图片，或者说你把这个也可以传到那个oss里面去，我就直接加到我这里边了。中。下这个啊零一.dbg，然后加完之后在这里边再加个默认值，就是cover里边。加一个叫。01点对比记。可以加上啊，就这位置咱看别写错啊，Static sta。T0，一点对比D。现在啊，应该有这么一个默认图片，就是这个，然后咱现在就是点击这个默认图片，它会弹个框去选择你的上传的内容啊，因为要你不选它，咱们一方去点，因为它是另外一个组件，那现在默认的咱换一个图片，就换我们的这个图片，当我一打开它就会掉接口就能实现，那我来打开一下啊，打开效果。难以打开。我们看一遍啊，大家看。

是不是过来了，这就是咱们刚才传的这个封面，比如说我再换一个啊，咱再试一个，我再传回它。再点打开是过来了，这样的话就做到了，然后这个封面就传到了OS中去，在这里边是用它那个返回的地址做了一个显示。所以这个啊，是咱们整合的课程封面上传，这咱们就做到了啊。我把这个。