Fine Uploader S3 basic上的进度条不一致

Question

我最近从 Dropzone JS 切换到 Fine 上传器，只是因为它具有更出色的体验并且具有更多工作功能，例如分块、直接 S3 支持等。

由于我们有一个非常自定义的 UI，我只是使用了 Fine 上传器的 S3 Basic 版本或 s3.fine-uploader.core.min.js（如果您愿意的话）。版本为：5.15.6。

我们在总进度条回调方面遇到问题，而且进度条仅在 90% 的情况下无法按预期工作。有时它的效果非常好，因为它显示了准确的百分比，不会挂起并且是一致的。但在大多数情况下，它只是从 20% 跳到 100%，对于像 200MB 这样的大文件不会显示渐变（它显示 5%，然后在 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

所以用两个词来回答我自己的问题：Service Worker。

事实证明，我设置的用于缓存网站并启用离线功能的服务人员正在影响进度条。