angular2中 实现七牛云js上传视频的操作笔记

其实最好的方案还是由后端直接传，具体是什么理由这里就暂时不讨论，咱们接着说，前端怎么实现视频上传七牛云的相关操作。

官网地址

1.Demo 2.x http://jssdk-v2.demo.qiniu.io/
表示完全按照官方的说明文档进行配置和安装依赖，并没有跑成功，具体报错信息忘记了，需要在电脑上面重新截图看看了。然后放弃2.x的实现方案

2. 我们采用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

这个请求的问题图片.png

最后百闻不如一见，还是看案例来得快一些：
参考码云地址：