阿⾥云视频点播（ApsaraVideo VoD）是集⾳视频采集、编辑、上传、⾃动化转码处理、媒体资源管理、⾼效云剪辑处理、分发加速、视频播放于⼀体的⼀站式⾳视频点播解决⽅案 我们上传视频功能并没有使⽤⾃⼰的后台进⾏上传，⽽是使⽤的第三⽅服务“阿⾥云视频点播”，采⽤第三⽅视频服务是⼀种主流⽅案，让公司可以更专注于核⼼业务⽽不必单独维护⼀套视频点播系统。

阿⾥云视频点播简介 - 图1

阿⾥云视频点播简介 - 图2

官⽅功能概述：地址，图⼀地址 通过上图得知，操作⼀共分为两⼤步，我们先获取上传授权，然后再进⾏资源上传即可。 获取上传授权的相关操作已经由后台的相关接⼝提供了。 ⽂件上传到需要查看阿⾥云官⽅⽂档操作。

操作指引

⽂档位置： 阿⾥云视频点播⻚⾯ -> 上传 SDK -> 客户端上传 -> 使⽤JavaScript上传SDK 操作步骤： 第⼀步“SDK下载”，这⾥的 SDK 理解为包含⼀系列特定功能的⽂件（⼀个或多个）。 ⻚⾯中找到“Web端SDK下载”部分，选择示例代码，进⾏下载。

阿⾥云视频点播简介 - 图3

解压⽂档，得到以下⽬录

阿⾥云视频点播简介 - 图4

根据以下路径找到“aliyun-upload-sdk”⽬录

阿⾥云视频点播简介 - 图5

添加到项⽬根⽬录中的 public ⽬录下，作为静态资源使⽤。

阿⾥云视频点播简介 - 图6

public ⽬录结构如下，我们需要使⽤的 SDK 以及配套⽂件⼀共有 3 个，都是 js ⽂件。

阿⾥云视频点播简介 - 图7

SDK ⽂件处理

由于这些 js ⽂件没有进⾏模块化处理，所以我们在项⽬中需要通过全局引⼊的⽅式使⽤。 将⽂件引⼊到 public/index.html 中，这些 public 中的静态资源不会被 webpack 处理。 引⼊时建议通过 / 设置路径，/ 在服务器中代表根⽬录。 引⼊顺序参考⽂档示例。 // /public/index.html <!DOCTYPE html> lang=“en”> charset=“utf-8”> http-equiv=“X-UA-Compatible” content=“IE=edge”> name=“viewport” content=“width=device-width,initial-sca le=1.0”> rel=“icon” href=“<%= BASE_URL %>favicon.ico”> <%</font><font style="color:rgb(255,0,0);">= </font><font style="color:rgb(111,66,193);">htmlWebpackPlugin.options.title %</font><font style="color:rgb(34,134,58);">></</font><font style="color:rgb(255,0,0);">title></font> <font style="color:rgb(34,134,58);"></</font><font style="color:rgb(255,0,0);">head></font> <font style="color:rgb(34,134,58);"><body></font> <font style="color:rgb(34,134,58);"><noscript></font> <font style="color:rgb(34,134,58);"><strong></font><font style="color:rgb(89,89,89);">We’re sorry but </font><font style="color:rgb(34,134,58);"><%</font><font style="color:rgb(255,0,0);">= </font><font style="color:rgb(111,66,193);">htmlWebpackPlugin.options.title </font> <font style="color:rgb(111,66,193);">%</font><font style="color:rgb(34,134,58);">> </font><font style="color:rgb(89,89,89);">doesn’t work properly without JavaScript enabled. Please enabl </font> <font style="color:rgb(89,89,89);">e it to continue.</font><font style="color:rgb(34,134,58);"></</font><font style="color:rgb(255,0,0);">strong></font><font style="color:rgb(191,191,191);"> </font> <font style="color:rgb(34,134,58);"></</font><font style="color:rgb(255,0,0);">noscript></font> <font style="color:rgb(34,134,58);"><div </font><font style="color:rgb(111,66,193);">id</font><font style="color:rgb(89,89,89);">=</font><font style="color:rgb(102,153,0);">“app”</font><font style="color:rgb(34,134,58);">></div></font> <font style="color:rgb(106,115,125);"><!-- 引⼊阿⾥云视频上传SDK --></font> <font style="color:rgb(34,134,58);"><script </font><font style="color:rgb(111,66,193);">src</font><font style="color:rgb(89,89,89);">=</font><font style="color:rgb(102,153,0);">“/aliyun-upload-sdk/lib/es6-promise.min.js”</font><font style="color:rgb(34,134,58);">></scr </font> <font style="color:rgb(34,134,58);">ipt></font> <font style="color:rgb(34,134,58);"><script </font><font style="color:rgb(111,66,193);">src</font><font style="color:rgb(89,89,89);">=</font><font style="color:rgb(102,153,0);">“/aliyun-upload-sdk/lib/aliyun-oss-sdk-5.3.1.min. </font> <font style="color:rgb(102,153,0);">js”</font><font style="color:rgb(34,134,58);">></script></font> <font style="color:rgb(34,134,58);"><script </font><font style="color:rgb(111,66,193);">src</font><font style="color:rgb(89,89,89);">=</font><font style="color:rgb(102,153,0);">“/aliyun-upload-sdk/aliyun-upload-sdk-1.5.0.min.j </font> <font style="color:rgb(102,153,0);">s”</font><font style="color:rgb(34,134,58);">></script></font> <font style="color:rgb(106,115,125);"><!-- built files will be auto injected --></font> <font style="color:rgb(34,134,58);"></</font><font style="color:rgb(255,0,0);">body></font> <font style="color:rgb(34,134,58);"></</font><font style="color:rgb(255,0,0);">html> </font> <h2 id="4927gq"><a name="4927gq" class="reference-link"></a><span class="header-link octicon octicon-link"></span>体验官⽅上传示例</h2><font style="color:rgb(38,38,38);">从官⽹下载的示例代码中找到 Vue 示例，路径为“aliyun-upload-sdk-1.5.0demo\vue-demo\src”，内部的“STSToken.vue”（STS ⽅式）与“UploadAuth.vue”（上传地址和凭证⽅式）对应两种上传⽅式， 官⽅推荐第⼆种。</font> <p><img src="https://cdn.nlark.com/yuque/0/2021/png/21445003/1634266485982-7b51bc38-b05b-4d5c-b6e7-9ab5c6da0be0.png" alt=""></p> <font style="color:rgb(38,38,38);">这⾥将“UploadAuth.vue”放到 /course/UploadAuth.vue 位置，并修改路由进⾏功能测试。 </font> <font style="color:rgb(89,89,89);">// router/index.js</font> <font style="color:rgb(89,89,89);">…</font><font style="color:rgb(191,191,191);"> </font> <font style="color:rgb(89,89,89);">{</font> <font style="color:rgb(89,89,89);">path: ‘/course/:courseId/video’,</font> <font style="color:rgb(89,89,89);">name: ‘course-video’,</font> <font style="color:rgb(89,89,89);">// 修改此处⽂件路径，⽤于测试</font> <font style="color:rgb(89,89,89);">component: () => import(/<em> webpackChunkName: ‘course-video’ </em>/ </font> <font style="color:rgb(89,89,89);">‘@/views/course/UploadAuth.vue’),</font><font style="color:rgb(191,191,191);"> </font> <font style="color:rgb(89,89,89);">props: true</font> <font style="color:rgb(89,89,89);">}</font> <font style="color:rgb(89,89,89);">..</font> <font style="color:rgb(38,38,38);">UploadAuth.vue 的代码⻛格⽆需处理，设置 eslint 不处理当前⽂件 js ⻛格即可 </font> <font style="color:rgb(38,38,38);">在 js 中书写 /<em> eslint-disable </em>/ 可局部禁⽤ eslint 检验。 </font> <font style="color:rgb(38,38,38);">书写位置之后都不进⾏检验 </font> <font style="color:rgb(38,38,38);">模板错误可在图示位置添加空格即可。</font> <font style="color:rgb(89,89,89);">// course/UploadAuth.vue</font> <font style="color:rgb(89,89,89);">…</font> <font style="color:rgb(34,134,58);"><script></font> <font style="color:rgb(106,115,125);">/<em> eslint-disable </em>/</font> <font style="color:rgb(31,127,154);">… </font> <p><img src="https://cdn.nlark.com/yuque/0/2021/png/21445003/1634266556133-c00b94e3-db68-4f8b-8dad-0f487d99c7b6.png" alt=""></p> <font style="color:rgb(38,38,38);">处理完毕，进⾏操作测试即可，由于是测试功能，⽆需授权即可操作，这⾥分析⼀下代码执⾏流程即可。 </font> <font style="color:rgb(38,38,38);">观察发现，上传凭证和地址信息（授权）是在 onUploadstarted 中设置的 </font> <font style="color:rgb(38,38,38);">注意：阿⾥云官⽅提供的回调中，只有 onUploadstarted 书写为了不规范的 camelCase，注意 </font> <font style="color:rgb(38,38,38);">拼写。 </font> <p><img src="https://cdn.nlark.com/yuque/0/2021/png/21445003/1634266581003-ac7f937a-9e11-4ce9-be61-2f89008981bc.png" alt=""></p> <font style="color:rgb(38,38,38);">最后将路径更改回到我们⾃⼰的 video.vue 准备设置功能</font> <font style="color:rgb(106,115,125);">// router/index.js</font> <font style="color:rgb(31,127,154);">…</font> <font style="color:rgb(89,89,89);">{</font> <font style="color:rgb(0,92,197);">path</font><font style="color:rgb(89,89,89);">: </font><font style="color:rgb(102,153,0);">‘/course/:courseId/video’</font><font style="color:rgb(89,89,89);">,</font> <font style="color:rgb(0,92,197);">name</font><font style="color:rgb(89,89,89);">: </font><font style="color:rgb(102,153,0);">‘course-video’</font><font style="color:rgb(89,89,89);">,</font> <font style="color:rgb(106,115,125);">// component: () => import(/* webpackChunkName: ‘course-video’ </font> <font style="color:rgb(106,115,125);">*/ ‘@/views/course/UploadAuth.vue’),</font><font style="color:rgb(191,191,191);"> </font> <font style="color:rgb(0,92,197);">component</font><font style="color:rgb(89,89,89);">: () </font><font style="color:rgb(215,58,73);">=> import</font><font style="color:rgb(89,89,89);">(</font><font style="color:rgb(106,115,125);">/<em> webpackChunkName: ‘course-video’ </em>/ </font> <font style="color:rgb(102,153,0);">‘@/views/course/video.vue’</font><font style="color:rgb(89,89,89);">),</font> <font style="color:rgb(89,89,89);">props: </font><font style="color:rgb(153,0,85);">true</font><font style="color:rgb(191,191,191);"> </font> <font style="color:rgb(89,89,89);">}</font> <font style="color:rgb(31,127,154);">… </font> <font style="color:rgb(31,127,154);"></font> <font style="color:rgb(38,38,38);"></font> <font style="color:rgb(51,51,51);"></font>