Fine Uploader S3 basic

Question

我最近从Dropzone JS切换到Fine uploader只是因为它具有更优越的体验，并且具有更多的工作功能，如分块，直接S3支持等。

由于我们有一个漂亮的自定义UI，我只使用了精简上传器的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

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

原来我设置的服务工作者缓存网站并启用离线功能正在影响进度条。