其实最好的方案还是由后端直接传，具体是什么理由这里就暂时不讨论，咱们接着说，前端怎么实现视频上传七牛云的相关操作。
七牛上传资料整理
1、https://blog.csdn.net/netdxy/article/details/50507161
2.请教 上传的视频如何获取其某一个帧的截图啊？ https://segmentfault.com/q/1010000006954846?_ea=1189503
视频上传七牛可以使用：url?vframe/jpg/offset/0 获取视频的第一帧，实时获取
官网地址
1.Demo 2.x http://jssdk-v2.demo.qiniu.io/
表示完全按照官方的说明文档进行配置和安装依赖，并没有跑成功，具体报错信息忘记了，需要在电脑上面重新截图看看了。然后放弃2.x的实现方案
- 我们采用1.x的js实现方案
Demo传送地址：http://jssdk.demo.qiniu.io/
看到官网的栗子，感觉瞬间就觉得万里之行要看到终点了，是不是这样我们接着往下看，这块以前也接触过，不过是用的封装好的函数，只管调用和传参就可以实现上传的操作，这次需要自己探索，确实有点耗费时间，当然最最关键的问题有两个：其一就是可以跑成功的案例非常稀少，其二，如何把这个功能引入到angular2中，实际项目版本用的是angular4.x
下面说说大体的问题：
1.引入相关，百度云地址：暂时占位（由于官方升级后，有个插件里面有不兼容低版本问题，然后引入到一起，运行就会报参数错误，可以进行下载打包的文件，是配套使用的）
2.里面有两个核心参数：
browse_button: 'pickfiles', //上传选择的点选按钮，**必需**
uptoken_url: '/token', //Ajax请求upToken的Url，**强烈建议设置**（服务端提供）
界面html展示(发现不能折叠代码，好尴尬) 重点看下：id="pickfiles"
<div class="col-md-12">
<div id="container" style="position: relative;">
<a class="btn btn-default btn-lg " id="pickfiles" href="#" style="position: relative; z-index: 1;">
<i class="glyphicon glyphicon-plus"></i>
<span>选择文件</span>
</a>
<div id="html5_1cf83ulbd1kmr7tng1i49fp9v4_container" class="moxie-shim moxie-shim-html5" style="position: absolute; top: 0px; left: 0px; width: 171px; height: 46px; overflow: hidden; z-index: 0;"><input id="html5_1cf83ulbd1kmr7tng1i49fp9v4" type="file" style="font-size: 999px; opacity: 0; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;" multiple="" accept=""></div></div>
</div>
核心参数2，你需要一个 uptoken_url: '/token',
这块请不用纠结了，喊后端哥哥给，喊后端哥哥给接口。
现在工程算是走到一半了，这个时候需要提前告诉你，官网的demo有个东西未做文档说明：
http://api.qiniu.com/v2/query?ak=anEC5u_72gw1kZPSy3Dsq1lo_DPXyvuPDaj4ePkN&bucket=jssdk
官网里面当界面加载完成后，会调用一次这个请求（见下图），这个请求是怎么调用的，在哪里调用的，以及它有什么用都没有做说明，OK，就这样我掉坑里面去了，然后另外一个坑是，由于使用的是ng2，并且界面有传图片和传视频两个操作是二选一的，楼主暗自得意的使用了ngIf这个语法，表示忘记了一个大前提：ngIf 如果条件不成立的时候，界面元素是不会加载出来的哇，及dom元素不会在界面渲染，这样就会导致一些预想不到的问题出现，这里可以用[ngClass] = ''代替 *ngIf
最后百闻不如一见，还是看案例来得快一些：
参考码云地址：
