vue 对接阿里云视频点播服务——视频上传

最近开发一个视频网站项目，想学习一些新东西，所以用了vue开发前台，用的是阿里云的视频点播服务，估计有条件的就自己开发了，，，

因为是个新手，还要对接这种服务，特别头大，去网上各种搜索，但是贴子几乎没有，没办法，只能自己硬啃，几经磨难，终于立地成佛，废话不多说，说一下我对接的过程和所犯的错误，避免以后忘记

ps:阿里云的文档怎麽说呢，非常好，每一句话都是经典，但是可能比较适合强有力的选手，我有点弱鸡，只能在做完之后才明白整体的思路，以及大致应该走的流程和知识点，所以下面我会理一下文档的观看流程，因为我当时是跳着看的！！！ 

首先是第一步，接入阿里云的视频点播，从文档开始撸，这里需要注意的是 CNAME绑定 和 视频转码 的问题，我会在视频播放篇说到

接下来就是上传了，我们先来看 开发指南->帐号 ,我用的是AccessKey，STS没用，不做说明，这里需要注意的是生成一个RAM子帐号，主帐号会有风险，没错，这是阿里云说的

然后是上传，上传我用的是客户端上传，因为服务端上传目前只支持JAVA，而我是最好的PHP

客户端上传有两种方式，有demo，非常好用，参考demo，仔细阅读文档一定可以成功，一定要仔细看看，我就是没仔细看卡住的

第一种是使用HTTP请求，也就是阿里云官方API上传，这种需要携带公共参数，具体的大家自己看文档吧，或者参考下这个https://forum.vuejs.org/t/vue/23732，当初上传时卡到，是这个代码帮助了我找到了错误，感谢贴出这个代码的作者

第二种是前端向后端携带参数发送请求，我感觉这样简单点，所以用的这个，需要后端接入SDK，版本有Java,Python,PHP, .NET,Go

上传基本逻辑（后面  vue上传 也是这个逻辑）：

1.引入js文件（vue是在index.html引入下载的demo的js文件，我放在static目录下了）

2.获取上传凭证（服务端或api，api需要携带好参数）

3.选择视频，change事件改变加入上传列表(uploader.addFile，注意选中的文件一定要加入上传列表，我当时是这里忘了添加卡住了)

4.开始上传，调用new出的对象上传

5.，返回定义的全局属性值，进行本地数据库上传

下面贴一下我的代码供大家参考：

index.html,三个文件之后的是视频播放的cdn

这里我写在了页面<script></script>里面，export default {}外面，也可以把这个对象单独定义一个文件，用 import引入

当选中视频上传时，获取参数(这里会在阿里云点播控制台生成一个临时的文件)，然后把视频加入到上传列表中

uploader.addFile视频加入到上传列表

userData要正确设置，复制阿里云的，不要复制上面的地址链接里的

这样，视频就可以上传成功了，如果不行，去看一下阿里云的demo和文当，需要仔细观看，或者留言

如果有错误，希望大家指出我的错误，以便于我改正，我也是个新手，然后希望有一个好的社区环境，大家互帮互助，但绝对不是不去思考，品尝过苦的东西才能令人记忆深刻