如何插入一个进度条，该进度条显示带有 XHR 功能的上传百分比

Question

let formData2 = new FormData();
                    formData2.append('_token', vm.response._token);
                    formData2.append('file', vm.response.content[i].path);
                    formData2.append('type', vm.response.content[i].type);
                    $.ajax({
                        async: false,
                        url: "page/file/create/upload/"+vm.response.topic_id,
                        type: "POST",
                        data: formData2,
                        cache: false,
                        dataType: 'json', // what to expect back from the PHP script
                        contentType: false,
                        processData: false,
                        xhr: function() {
                            var xhr = new XMLHttpRequest();
                            console.log(xhr);
                            xhr.open('POST', this.url, false);
                            if (xhr.open) {
                                console.log("xhr port open");
                            }
                            if (xhr.upload) {
                                xhr.upload.addEventListener('progress', this.onProgress);
                                console.log("xhr.upload");
                            }
                            return xhr;
                          //  console.log(xhr);
                        },
                        success: function (title) {
                            console.log(" file upload in controller recieves: "+title);
                        },
                    })
                }

分 ： 1> 这是 Vue 页面中用"方法"编写的函数(使用 Laravel v5.5 + vue 1.0 的文件上传练习项目(

点：我的控制器文件中的 2>顺利上传，没有问题。

点 ：3> 现在我想插入一个进度条，它显示上传百分比

已经尝试过 xhr：函数，但不知道获取上传 %...

Answer 1

现在我的 xhr 函数看起来像这样。 如果我得到百分比的值。我将它与我的进度条值绑定。但我无法获得任何上传%

xhr: function() {
                                var xhr = jQuery.ajaxSettings.xhr();
                                console.log(xhr);
                                xhr.open('POST', this.url, false);
                                if (xhr.open) {
                                    console.log("xhr port open");
                                }
                                if (xhr.upload) {
                                    var percentage = 0;
                                    xhr.upload.addEventListener('progress', function(e) {
                                        if(e.lengthComputable) {
                                            percentage = e.loaded/e.total;
                                            percentage = parseInt(percentage * 100);
                                            // Do what ever you want after here
                                            console.log("percentage:"+percentage);
                                        }
                                    }, false);
                                }
                                return xhr;
                              //  console.log(xhr);
                            },

Answer 2

您可以在下面尝试此代码，它在我这边有效：

xhr : function() {
    var xhr = jQuery.ajaxSettings.xhr();
    if(xhr.upload) {
        if(xhr instanceof window.XMLHttpRequest) {
            var percentage = 0;
            xhr.upload.addEventListener('progress', function(e) {
                if(e.lengthComputable) {
                    percentage = e.loaded/e.total;
                    percentage = parseInt(percentage * 100);
                    // Do what ever you want after here
                }
            }, false);
        }
    }
    return xhr;
}

基本上，我使用xhr = jQuery.ajaxSettings.xhr()和xhr.upload.addEventListener进度来计算其进度百分比。

希望这有效。

Answer 3

最后，它对我有用。 快乐的我:)

xhr: function () {
                                var xhr = new window.XMLHttpRequest();
                                xhr.upload.addEventListener("progress", function (evt) {
                                    if (evt.lengthComputable) {
                                        var percentComplete = evt.loaded / evt.total;
                                        percentComplete = parseInt(percentComplete * 100);
                                        console.log("% :" + percentComplete );
                                        $('.myprogress').text(percentComplete + '%');
                                        $('.myprogress').css('width', percentComplete + '%');
                                    }
                                }, false);
                                return xhr;
                            },