如何为 Laravel 7 voyager 管理仪表板添加进度条

问题描述

我正在使用 laravel 7 voyager 1.4，我也在使用 edit-add.blade.PHP 视图的自定义，用于我的一个面包。我正在使用 voyager 的控制器（没有覆盖控制器）。

我试过像这样添加ajaxForm：

        var bar = $('.bar');
        if (bar.length === 0)
            return;
        var percent = $('.percent');
        var status = $('#status');
        var remainingTimedisplay = $('#remainingTime');
        var uploadSpeed = $('#uploadSpeed');
        var started_at;
        $('form').ajaxForm({
            beforeSubmit: validate,clearForm: true,dataType: 'json',beforeSend: function () {
                status.empty();
                var percentVal = '0%';
                // var posterValue = $('input[name=exerciseFile]').fieldValue();
                bar.width(percentVal)
                percent.html(percentVal);
                started_at = new Date();
            },uploadProgress: function (event,position,total,percentComplete) {
                if (bar.length === 0)
                    return;
                var percentVal = percentComplete + '%';
                bar.width(percentVal)
                percent.html(percentVal);

                var seconds_elapsed = (new Date().getTime() - started_at.getTime()) / 1000;
                var bytes_per_second = seconds_elapsed ? position / seconds_elapsed : 0;
                var Kbytes_per_second = bytes_per_second / 1024;
                Kbytes_per_second = Math.round(Kbytes_per_second);
                var remaining_bytes = total - position;
                var seconds_remaining = seconds_elapsed ? remaining_bytes / bytes_per_second : 'calculating';
                seconds_remaining = Math.round(seconds_remaining);

                uploadSpeed.html(Kbytes_per_second + ' Kb/s');
                remainingTimedisplay.html(seconds_remaining + ' seconds');
                status.text('Uploading');
            },success: function () {
                if (bar.length === 0)
                    return;
                var percentVal = 'Finishing ...';
                bar.width(percentVal)
                percent.html(percentVal);
                status.text(percentVal);
            },complete: function (xhr) {
                // console.log(xhr);
                var percentVal;

                // showNotify(xhr.responseText);

                alert(xhr.responseText);
                var res = JSON.parse(xhr.responseText);

                if (res.exception) {
                    showNotify(res.exception,5000)
                    percentVal = 'something went wrong: ' + res.exception;
                } else {
                    showNotify(res.status,5000)
                    percentVal = 'Uploaded';
                }
                percent.html(percentVal);
                uploadSpeed.html(percentVal);
                remainingTimedisplay.html(percentVal);
                status.text(percentVal);

                // if (res) {
                //     alert('upload done');
                // }
                // alert('Uploaded Successfully');
                // window.location.href = '/dashboard/courses/create';
            }
        });

但是当我尝试上传文件时，进度会在一毫秒内达到 100%，然后等待上传完成。

我该如何改变这种行为？

我不喜欢覆盖控制器，但如果必须，我会。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）