JS XHR JSON прогресс загрузки полезной нагрузки

Question

Любой способ получить прогресс при загрузке большой строки полезной нагрузки JSON с использованием XHR?

в моем коде, он печатает только 100% после завершения, даже размер полезной нагрузки json = 30 МБ

let xmlhttp = new XMLHttpRequest();   // new HttpRequest instance
        xmlhttp.addEventListener("progress", function (evt) {
            console.log(evt.lengthComputable); // false
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total;
                console.log((Math.round(percentComplete * 100) + "%"));
            }
        }, false);
        xmlhttp.onreadystatechange = (event) => {
            if (xmlhttp.readyState === 4 && xmlhttp.status >= 200 && xmlhttp.status <= 299) {
                let res = JSON.parse(xmlhttp.responseText);
                if (typeof this.options.onVideoGetsUploaded === "function") {
                    console.log('success')
                }
            } else if (xmlhttp.readyState === 4 && xmlhttp.status >= 400 && xmlhttp.status <= 550) {
                //error while uploading
                console.log(xmlhttp.statusText)
            }
        };
        xmlhttp.open("POST", this.options.uploadEndPoint, true);
        xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
        xmlhttp.send(JSON.stringify({
            data: base64data
        }));

Answer 1

Я только что просмотрел старый код, где я это сделал.Для загрузки я сделал это

var request = new XMLHttpRequest();

// before opening your request
request.upload.onprogress = function(e) {
    // progress in % is: Number(e.loaded / e.total * 100)
};

// open and send request

Это кажется странным, и я помню, как провел несколько часов, пытаясь выяснить это.Может быть, вы могли бы также сделать:

request.upload.addEventListener(“progress”, callback())

Answer 2

Вы можете установить заголовок длины содержимого в своем запросе, тогда evt.lengthComputable может иметь значение true.