Fine Uploader的我的端点位于限制每秒请求数的服务器上。可以使用 maxConnections:1 来实现限制上传,并在 onValidate 中返回一个承诺,该承诺会在自上次 onValidate 调用后至少超过X时间时解析
问题是由于限制在 onValidate 回调中,因此上传不会显示在队列中,因为它们尚未经过验证。
文档说明以下回调支持承诺:
使用带有完全相同代码的 onSubmit 不会限制上传,因为它似乎是在添加文件时调用的。不幸的是,没有其他回调似乎是达到预期结果的合适时间。
有没有办法实现这种类型的节流并仍然显示排队的上传?
这是我目前的解决方案:
/************************** file 1 **************************/
angular
.module('myApp', [])
.controller('myController', [
'$scope',
'$q',
function(
$scope,
$q
){
var lastUploadTime = false;
$scope.throttledUpload = function(throttle){
var deferred = $q.defer();
var elapsedTime = Date.now() - lastUploadTime;
var delay = 0;
if(elapsedTime <= throttle){
delay = throttle - elapsedTime;
}
setTimeout(function(){
lastUploadTime = Date.now();
deferred.resolve();
}, delay);
return deferred.promise;
};
}]);
/************************** file 2 **************************/
var uploader = new qq.FineUploader({
element: document.getElementById('file-uploader'),
maxConnections: 1,
request: {
endpoint: 'upload.php'
},
retry: {
enableAuto: true
},
callbacks: {
onStatusChange: function(){
// omitted for brevity, returns nothing
},
onValidate: function(){
// this works, but will not work if instead passed as onSubmit
return angular
.element('#photo-galleries-controller')
.scope()
.throttledUpload(400);
},
onComplete: function(){
// omitted for brevity, returns nothing
}
}
});
https://plnkr.co/edit/14BaZj5cBbX1FYMPpne9?p=preview有一个示例,但服务器不会限制此演示的请求。
** 修改 **
onValidate和onSubmit进程的承诺确实存在差异。
onSubmit()回调将等待在上传该文件之前解析promise,但是在UI上删除许多文件将导致所有onSubmit()回调立即发生。通过onSubmit()添加两秒延迟将导致一批文件全部(大致)同时上传,但在UI上被删除后两秒钟。
onValidate()回调的不同之处在于它们是按顺序处理的。从onValidate()回调中返回一个promise会导致下一个文件的验证也被延迟。通过onValidate()添加两秒延迟将导致在每次上传开始之间(大约)两秒钟上传一批文件。
以下是显示上述内容的控制台输出。这两者之间的唯一区别在于返回promise的回调。其他回调都没有返回(未定义)。
的onSubmit():
2016-09-28 16:50:08.918 onValidate()
2016-09-28 16:50:08.927 onSubmit()
2016-09-28 16:50:08.929 -- delaying for 0ms
2016-09-28 16:50:08.938 onValidate()
2016-09-28 16:50:08.939 onSubmit()
2016-09-28 16:50:08.940 -- delaying for 1997ms
2016-09-28 16:50:08.951 onUpload()
2016-09-28 16:50:08.956 onValidate()
2016-09-28 16:50:08.956 onSubmit()
2016-09-28 16:50:08.958 -- delaying for 1980ms
2016-09-28 16:50:08.990 onValidate()
2016-09-28 16:50:08.991 onSubmit()
2016-09-28 16:50:08.994 -- delaying for 1943ms
2016-09-28 16:50:09.009 onValidate()
2016-09-28 16:50:09.010 onSubmit()
2016-09-28 16:50:09.011 -- delaying for 1926ms
2016-09-28 16:50:09.033 onComplete()
2016-09-28 16:50:10.947 onUpload()
2016-09-28 16:50:11.029 onComplete()
2016-09-28 16:50:11.032 onUpload()
2016-09-28 16:50:11.229 onComplete()
2016-09-28 16:50:11.231 onUpload()
2016-09-28 16:50:11.291 onComplete()
2016-09-28 16:50:11.293 onUpload()
2016-09-28 16:50:11.342 onComplete()
的OnValidate():
2016-09-28 16:56:11.002 onValidate()
2016-09-28 16:56:11.009 -- delaying for 0ms
2016-09-28 16:56:11.021 onSubmit()
2016-09-28 16:56:11.045 onUpload()
2016-09-28 16:56:11.095 onValidate()
2016-09-28 16:56:11.096 -- delaying for 1919ms
2016-09-28 16:56:11.142 onComplete()
2016-09-28 16:56:13.021 onSubmit()
2016-09-28 16:56:13.029 onUpload()
2016-09-28 16:56:13.039 onValidate()
2016-09-28 16:56:13.040 -- delaying for 1975ms
2016-09-28 16:56:13.245 onComplete()
2016-09-28 16:56:15.019 onSubmit()
2016-09-28 16:56:15.053 onUpload()
2016-09-28 16:56:15.090 onValidate()
2016-09-28 16:56:15.091 -- delaying for 1924ms
2016-09-28 16:56:15.419 onComplete()
2016-09-28 16:56:17.020 onSubmit()
2016-09-28 16:56:17.063 onUpload()
2016-09-28 16:56:17.121 onValidate()
2016-09-28 16:56:17.122 -- delaying for 1894ms
2016-09-28 16:56:17.131 onComplete()
2016-09-28 16:56:19.021 onSubmit()
2016-09-28 16:56:19.080 onUpload()
2016-09-28 16:56:19.236 onComplete()