上载S3 BASIC上的精细上传器上的进度条不一致

Question

我最近从Dropzone JS切换到Fine Uploader，只是因为它具有更高的体验，并且具有更多的工作功能，例如块，直接的S3支持和类似的功能。

由于我们有一个漂亮的自定义UI，因此我只使用了fine uploader或s3.fine-uploader.core.min.js的S3基本版本。版本是：5.15.6。

我们在总进度栏回调方面遇到问题，而在90％的案件中，进度栏只是没有预期的事实。有时它的工作非常好，就像它显示出准确的百分比，不会悬挂并且是一致的。但是大多数情况下，它只是从20％跳到100％，不会显示出大型文件(如200MB((显示为5％，然后在x x的时间后显示100％(的逐渐进度。

我使用了调试模式，我知道它在块中上传，所以它应该逐步取得进展，但我根本不知道该怎么做。

签名S3请求的后端是Laravel，我们用于后处理。UI方面是使用bootstrap 4。

构建的

如果有人有一个主意，请把这个问题弄清楚。谢谢。

JS代码在这里

var dragAndDropModule = new qq.DragAndDrop({
    dropZoneElements: [document.getElementsByTagName('body')[0]],
    callbacks: {
        processingDroppedFilesComplete: function(files, dropTarget) {
            uploader.addFiles(files);
        }
    }
});
var uploader = new qq.s3.FineUploaderBasic({
    debug: false,
    button: document.getElementById('upload-file'),
    validation: {
        sizeLimit: 5368709120
    },
    chunking: {
        enabled: true
    },
    objectProperties: {
        region: 'some region',
        key: function (id) {
            return upload_path + '/'+ uploader.getName(id);
        }
    },
    request: {
        endpoint: 'some endpoint',
        accessKey: 'some key',
        customHeaders: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    },
    signature: {
        endpoint: '/s3/endpoint',
        version: 4,
        customHeaders: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    },
    uploadSuccess: {
        endpoint: '/files/store',
        customHeaders: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        params: {
            order_id: 'id',
            upload_path: 'path',
            folder_id: 'folder_id',
            type: 'original'
        }
    },
    callbacks: {
        onProgress: function(id, name, totalUploadedBytes, totalBytes) {
            var progress =  Math.round((parseInt(totalUploadedBytes) * 100)/parseInt(totalBytes));
        },
        onTotalProgress: function(totalUploadedBytes, totalBytes) {
            var total_progress =  Math.round((parseInt(totalUploadedBytes) * 100)/parseInt(totalBytes));
            $('.total-upload-progress .progress-bar').width(total_progress + '%');
            $('.total-upload-progress .total-count').html(total_progress + '%');
        },
        onUpload: function(id, name) {
            if($('.total-upload-progress:hidden')) {
                $('.total-upload-progress').show();
            }
        },
        onSubmit: function(id, name) {
            var file_size = this.getSize(id);
            this.setParams({
                size: file_size
            });
            $('.file-list .row').append('<div class="col-md-3"><div class="card" id="file-'+id+'"><div class="card-image"><img src="no-preview.jpg" id="preview-'+id+'" class="img-fluid"><span class="file-status processed">Uploading</span></div><div class="card-body"><h5>File name:</h5><h4>'+name+'</h4></div></div>');
            // LESS THAN 10MB
            if(file_size < 10485760) {
                var image_element = document.getElementById('preview-'+id);
                this.drawThumbnail(id, image_element, 255, false);
            }
        },
        onComplete: function(id, name,responseJSON,xhr) {
            $('#file-'+id).find('.file-status').removeClass('processed').addClass('uploaded').text('Uploaded');
        },
        onError: function(id, name,responseJSON,xhr) {
            $('#file-'+id).find('.file-status').removeClass('processed').addClass('error').text('Error');
        }
    }
});

Answer 1

所以用两个词回答我自己的问题：服务工作者。

事实证明，我设置的服务工作者可以缓存该网站，并且启用离线功能正在影响进度栏。