80.后台系统-腾讯云视频点播-上传视频前端原创

下面呢，我们来实现上传视频还有删除视频的前端整合，咱们开始做一下，首先第一步我在前端里边建一个JS文件，把咱们上传视频的接口先完成定义，包括删除视频接口也给它做到，那咱们来写一下我在这里边。项目的A片vod里边建个文件。vod.js创建接口的定义，这定义过程中呢，因为上传咱们用的不是阿贾克斯请求，所以我就直接把这个。删除视频接口，在里边定义出来这路径跟我们接口中保持一致，这个路径这是第一步，然后第二步咱们来创建一个页面。各位看啊，之前咱们页面中有文件夹叫video video中有个页面叫form.voe咱们在点VE中来改我们的代码，因为这里边大家看有一个上传视频部分，用的是element UI中的组件来实现上传，那咱把它改一下这个结构我就从里边直接复制过来，然后把里边的路径包括名字我们给它改造一下。

页面就是video里边的form.vo这个页面。咱们复制一下，然后咱们看一下这个结构。首先引入我们的文件video和vod，然后在里边第一部分大家看这里啊，这里加上你接口的路径，因为咱们上传要通过这个路径做上传，然后上传路径看一下。就是里边的admin vod upload，这是我们的第一部分，然后再再往下看，下面咱是一个框，之前写到的，然后最终做这个处理，咱们看主要的上传部分，上传中的第一部分就是在这里。这位置呢，有几个方法咱们看一下啊，首先第一个方法就是上传成功之后，咱们得到接口反应的数据，因为咱们上传之后，接口返回到是视频ID，我把视频ID做个封装，最后我们加到数据库中，如果失败抛出异常，另外里边有这个删除的一个处理，咱们也是调方法进行实现。

所以以上啊，是咱们整合到前端部分，我们就快速做到了，然后做到之后下面呢，咱们把这个效果我们最终实现一下，看一下最终结果怎么样，就实现一个。添加小结上传视频的功能，咱们来测试一下啊，首先我现在把这个控制台我们再给它打开。打开之后呢，找到里面这个叫音视频管理，为了咱们看到明确这里面这视频我先给它删掉。然后一会儿咱们重新来做，那下面咱们来做个测试啊，首先我把接口重新启动一下。

然后咱们通过前端测试一下，咱们最终的这么一个功能，等它启动，咱们最终试一下啊，这个效果看它是怎么样，就最终能实现添加。小结，上传视频功能，视频会用到腾讯云的云点播服务。等他出来，等咱们测试啊。现在已经启动了，然后咱们看一下啊，首先我现在在这个界面中，咱们找一门课程，比如说啊，我就找一个我们之前曾经加的那门课程，或者咱你可以重新加一个都可以，咱就找这门课程。在大纲里边，大纲中大家看啊，这位置有章节，有小节，那比如现在我再来加个小节，咱们叫第二节，我加个二，然后在里边选择免费或者默认这个位置，选择视频，咱们开始上传，那我传的话，我就找到我那个路径D盘里边这个文件。

然后咱们上传。点这个按钮。咱们等他实现各位看啊，现在提示我们就是已经成功了，咱们完成上传完成之后，点击确定实现了添加这个已经加进来了，加进来之后咱们看一下表里面变化，我这个名字叫第二节二，咱们找一下啊，或者你改一个更容易找的一个名字。我这里看一下啊，刚才咱加的那个小结。找到啊。这个小节在这里边啊，咱们看一下啊。我根据这个ID咱做一个排序啊，在这里大家看啊，第二节二加进去了，然后你看啊，这就是我们视频的ID，这个是视频的名称就可以了，咱们到腾讯云的控制台来看一下，看一下我们刚才那个视频。

大家看是不是传进来了，然后看管理里边有视频的详情信息，包括做了一个就是任务流的这么一个处理，所以现在我们就完成了视频的上传功能。这个就最终完成整合，所以各位把这功能能加到你的项目中来，然后这个之后呢，我们下面再继续往下来做，但是这里边呢，咱们学腾讯云，咱学的更完整点。大家注意啊，我刚才代码中呢，有这么一个地方，它里边有一个缺陷。大家看一下啊，我们刚才的这段代码，或者说这行代码。大家看到缺陷很明确，我这么写是不是找到本地的这个文件路径，就通过本地一个固定文件上传，这么传可以，但是这么传的话，你需要找到固定的路径，固定文件，而咱们一般传是不是用流的方式传呀，而流的方式传目前在这个腾讯云里边这个附加K中，他并没有提供中这种流的方式上传，就没有这个写法啊，当然以后可能他会完善，目前还没有这种写法，所以咱们要用到不是写固定路径该怎么做，给各位再介绍一下。

腾讯云上传视频的其他方式，这种方式不需要写固定路径，咱可以直接传播文件，然后可以把这个上传上来，这种方式我们看到啊，咱们刚才看的是服务端上传，这里边要看到客户端上传，然后里边有它过程，那这个一会儿给各位做个测试。咱们现在啊，就完成了添加小结上传视频的功能。