七牛多文件上传使用 JavaScriptSDK

我们项目的运营平台有资源上传模块，之前是在前端用file直接传到后端，后端通过七牛javaSDK进行上传至七牛云存储，这样有什么问题呢？就是速度慢，一个文件的上传需要先从浏览器客户端到应用服务器，再从应用服务器到七牛云，一个文件走了2段路，还占用了服务器的带宽，在请求量大的情况下还会严重影响服务器的网络请求处理，所以我用JavaScriptSDK进行重写资源上传。

资源上传我们的需求是需要支持多文件同时上传，并且mp3文件需要获取到播放时长。
在前端js获取MP3播放时长要比后端java方便很多，js可以使用audio组件，使用java的话可能会遇到某些mp3文件有问题，无法快速获取到播放时长，需要将内存中的文件持久化到磁盘然后播放再获取时长，最后删除文件，这种方式对于服务器磁盘很不友好。

七牛官方JavaScript SDK文档
七牛官方示例

官方文档里有下载地址请各位看官自行跳转下载，官方没有提供多文件上传例子，在下载源码后发现这是个node.js项目，作为一个javaWeb开发者稍微有一点点懵逼。。。test文件夹里面是示例代码，具体怎么将源码中文件怎么弄成一个可以在javaWeb项目可以直接使用请各位自己捣鼓捣鼓吧。

获取MP3时长的方法
function getAudioDuration(file) {
    var audio = document.createElement("audio");
    var duration = $.Deferred();
    var src = window.createObjectURL&&window.createObjectURL(file)||window.URL&&window.URL.createObjectURL(file)||window.webkitURL && window.webkitURL.createObjectURL(file);
    audio.src=src;
    audio.play();
    function g(){
        if(isNaN(audio.duration)){
            requestAnimationFrame(g)
        } else {
            //获取到音频时长后终止循环
            duration.resolve(parseInt(audio.duration));
        }
    }
    requestAnimationFrame(g);
    return  duration;
}

getAudioDuration返回的是$.Deferred()对象，为什么需要返回一个延迟对象？因为并不能在audio.play()之后就能立刻获取到audio.duration值，我使用了requestAnimationFrame函数来回调获取音频时长，其实也可以使用setTimeout。

//循环mp3获取时长
for (var i=0;i<files.length;i++){
	(function (i) {
		getAudioDuration(filess[i]).then(function (data) {
			build(i,data);
		})
	})(i);
}

用普通的for(var i)调用getAudioDuration(filess[i])，build(i,data);接收到的都是最后一个i，JS中的for循环体比较特殊，每次执行都是一个全新的独立的块作用域，var声明的变量作用域是方法作用域，getAudioDuration又是延迟对象，要解决这个问题有两个方法，一是使用let来声明i，也可以用立即执行函数来解决，我这里选择了理解执行函数是因为看上去更炫。。再一个也是看到七牛sdk里用了想学一下。
源码中构建上传组件对象都是用到var声明，需要改为let
我修改后的代码
链接：https://pan.baidu.com/s/1FQdPKOV5fvViw8o_pV8kKw
提取码：vypf