如何限制Fine Uploader并仍然显示排队上传?

时间:2016-09-28 01:53:22

标签: javascript fine-uploader

Fine Uploader的我的端点位于限制每秒请求数的服务器上。可以使用 maxConnections:1 来实现限制上传,并在 onValidate 中返回一个承诺,该承诺会在自上次 onValidate 调用后至少超过X时间时解析

问题是由于限制在 onValidate 回调中,因此上传不会显示在队列中,因为它们尚未经过验证。

文档说明以下回调支持承诺:

  • onCancel
  • onCredentialsExpired
  • onPasteReceived
  • 的onSubmit
  • onSubmitDelete
  • 的OnValidate
  • onValidateBatch

使用带有完全相同代码的 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()

0 个答案:

没有答案