七牛云 js前端上传文件

      最近项目重构开发，延续之前的版本使用七牛云存储文件；
      那么就需要把文件上传到七牛云，之前所有的上传是各个端（IOS、android、web）先上传到服务器，再由服务器上传到七牛云上，服务程序使用的java上传，比较简单，就不说了。
      现在这个版本考虑到需要上传的文件较多，其中很多视频文件，再走服务器上传的话效率太低，还占用服务器带宽，所以直接由各个端直接上传到七牛上去；  IOS 和android由前端的自己去弄sdk（后台省了一个接口，哈哈~~），但是管理后台上传文件还得自己来啊， 就研究了一下七牛的  js-sdk上传；

      下面说说我的接入步骤（上传图片为例）：

      1、导入下面两个js，这俩个js在七牛https://developer.qiniu.com/kodo/sdk/1283/javascript 可以找到直接引用的CDN文件，但是建议自己下载源码到自己服务器然后引入，因为我们可能修改qiniu1.0.14.js （版本可以不一样）里面的代码； 

<!-- 七牛上传相关 -->
<script src="../resource/plugins/qiniu/qiniu1.0.14.js"  ></script>
<script src="../resource/plugins/qiniu/plupload2.1.9.full.min.js"  ></script>

       2、html代码，创建一个table，在td里面创建一个button，这个button就是上传选择文件的触发按钮 ； 七牛的js会在这个标签下面生成input标签的代码，可以自己在浏览器查看下，是有的~~~~~~

<td align="left" id="bannerTd">
              <button id="uploadBanner" style="width: 160px;"  class="btn btn-info" >选择文件</button>
 </td>

      3、js代码 ，创建一个方法ininQiniu() ,这个方法在 步骤2中的代码加载后就执行；

          a、把td的id值【bannerTd】，填写到 下面方法的 container  和  drop_element处；
          b、 把 button的id值【uploadBanner】，填写到下面的browse_button处；

       c、上传的文件名称问题，有两种方式：

                       1、自动生成随机文件名称：

                   unique_names: true ,              //true生成唯一的文件名称

                                2、自定义文件名称：

                   unique_names: false ,              //true生成唯一的文件名称             save_key: false,

                                  这时文件上传路径在init  --> Key中设置

                                 我这里格式 为 /gcrcsUploadFile/2017/7/11/153950/firstClassBanner.png 

           d、max_file_size可以写大一点

        e、chunk_size 我这里设置为0

           f、domain的值就是你的空间的加速域名

       function initQiniu() {            //引入Plupload 、qiniu.js后          var uploader = Qiniu.uploader({              runtimes: 'html5,html4,flash',    //上传模式,依次退化              browse_button: 'uploadBanner',       //上传选择的点选按钮，**必需**              uptoken_url: baseUrl + '/basicController/getQiniuUptoken.do',            //Ajax请求upToken的Url，**强烈建议设置**（服务端提供）              // uptoken : '', //若未指定uptoken_url,则必须指定 uptoken ,uptoken由其他程序生成              // unique_names: true, // 默认 false，key为文件名。若开启该选项，SDK为自动生成上传成功后的key（文件名）。              // save_key: true,   // 默认 false。若在服务端生成uptoken的上传策略中指定了 `sava_key`，则开启，SDK会忽略对key的处理              domain: http://***.**vzb.cn/,   //bucket 域名，下载资源时用到，**必需**              get_new_uptoken: true,  //设置上传文件的时候是否每次都重新获取新的token              container: 'bannerTd',           //上传区域DOM ID，默认是browser_button的父元素，              max_file_size: '2048mb',           //最大文件体积限制              flash_swf_url: 'js/plupload/Moxie.swf',  //引入flash,相对路径              unique_names: false ,              //true生成唯一的文件名称              save_key: false,              max_retries: 3,                   //上传失败最大重试次数              dragdrop: true,                   //开启可拖曳上传              drop_element: 'bannerTd',        //拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传              chunk_size: '0mb',                //分块上传时，每片的体积              auto_start: true,                 //选择文件后自动上传，若关闭需要自己绑定事件触发上传              init: {                  'FilesAdded': function(up, files) {                      plupload.each(files, function(file) {                          // 文件添加进队列后,处理相关的事情                      });                  },                  'BeforeUpload': function(up, file) {                         // 每个文件上传前,处理相关的事情                  },                  'UploadProgress': function(up, file) {                         // 每个文件上传时,处理相关的事情                      //获取上传进度                      var percent = file.percent;                      //上传提示                       $("#uploadBanner").text("已经上传" + percent + "%");                  },                  'FileUploaded': function(up, file, info) {                   // 每个文件上传成功后,处理相关的事情                   // 其中 info 是文件上传成功后，服务端返回的json，形式如                   // {                   //    "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",                   //    "key": "gogopher.jpg"                   //  }                   // 参考http://developer.qiniu.com/docs/v6/api/overview/up/response/simple-response.html                                      var domain = up.getOption('domain');                   var obj = JSON.parse(info);                   var url = domain + obj.key;                   $("#banner").val(obj.key);                     $("#uploadBanner").text("重新上传");                     $("#bannerBackShow").attr("src",url);                  },                  'Error': function(up, err, errTip) {                         //上传出错时,处理相关的事情                  },                  'UploadComplete': function() {                         //队列文件处理完毕后,处理相关的事情                  },                  'Key': function(up, file) {                      // 若想在前端对每个文件的key进行个性化处理，可以配置该函数                      // 该配置必须要在 unique_names: false , save_key: false 时才生效                      //key就是上传的文件路径                      var key = "";                      //获取年月日时分秒                      var date = new Date();                      var year = date.getFullYear();                      var month = date.getMonth()+1;                      var day = date.getDate();                      var hour = date.getHours();                      var minute = date.getMinutes();                      var second = date.getSeconds();                      key += '/gcrcsUploadFile/' + year+'/'+month+'/'+day+'/'+hour+minute+second +'/';                      console.log(file.name);                      key += file.name;                      return key ;                  }              }          });    }

      4、获取上传凭证uptoken ，七牛的文档建议我们在服务器生成uptoken，所以我就在服务器生成喽，其实也是调用七牛的代码，我后台是java，就需要在后台程序集成七牛java的sdk，步骤如下；

           a、使用maven导入sdk

<!-- 七牛相关 开始-->    <dependency>      <groupId>com.qiniu</groupId>      <artifactId>qiniu-java-sdk</artifactId>      <version>7.2.6</version>      <scope>compile</scope>    </dependency>    <dependency>      <groupId>com.squareup.okhttp3</groupId>      <artifactId>okhttp</artifactId>      <version>3.3.1</version>      <scope>compile</scope>    </dependency>    <dependency>      <groupId>com.google.code.gson</groupId>      <artifactId>gson</artifactId>      <version>2.6.2</version>      <scope>compile</scope>    </dependency>    <dependency>      <groupId>com.qiniu</groupId>      <artifactId>happy-dns-java</artifactId>      <version>0.1.4</version>      <scope>compile</scope>    </dependency><!-- 七牛相关 结束-->

            b、提供一个json接口，接口返回uptoken

@Overridepublic Object getQiniuUptoken() throws Exception {InterfaceResult.start("获取七牛上传凭证uptoken");Map<String, Object> data = new HashMap<String, Object>();Auth auth = Auth.create("你的AK", "你的SK");String uptoken =  auth.uploadToken("使用的空间名称");data.put("uptoken", uptoken);InterfaceResult.end();return data;}

            返回的数据格式如：

    {    "uptoken": "0MLvWPnyya1WtPnXFy9KLyGHyFPNdZceomL..."    }

          c、把你刚刚写的接口地址写在  步骤3的  uptoken_url 中；

       5、上传成功后 处理的步骤在下面方法的 init --->  FileUploaded 中，可以获取文件路径，也可以获取到上传的域名； 这里可以自定义，做回显等操作；

       6、上传过程中，可以在init-->UploadProgress  中获得上传进度百分比，可以结合其他样式效果给用户展示进度提示 ；

      7、如果你上传过程中返回了please use ***巴拉巴拉的错误结果  就   修改qiniu1.0.14.js ，因为我使用的是七牛的backet空间是华南区的，而qiniu1.0.14.js里面默认的空间是华北的，如果你用的是华南的 就需要修改qiniu1.0.14.js；

               把qiniu1.0.14.js里所有的 http://up.qiniu.com  修改为http://up-z2.qiniu.com

                                          所有的http://upload.qiniu.com  修改为http://upload-z2.qiniu.com

             具体修改可以找七牛可客服提工单，麻蛋我也很无奈，在文档里面没找到啊！！！！

我的第一个CSDN文章哈，以前笔记都写在云笔记里面，想想还在放在这里大家一起学习学习哈哈！！！有问题的话请各位兄弟姐妹多多指教！！！没问题可以指教哈！！！