那么就需要把文件上传到七牛云，之前所有的上传是各个端（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() {4、获取上传凭证uptoken ，七牛的文档建议我们在服务器生成uptoken，所以我就在服务器生成喽，其实也是调用七牛的代码，我后台是java，就需要在后台程序集成七牛java的sdk，步骤如下；
//引入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 ;
}
}
});
}
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文章哈，以前笔记都写在云笔记里面，想想还在放在这里大家一起学习学习哈哈！！！有问题的话请各位兄弟姐妹多多指教！！！没问题可以指教哈！！！