javascript - JS XHR JSON负载上传进度

Question

使用 XHR 上传大型 JSON 负载字符串时有什么方法可以获取进度吗？

在我的代码中，一旦完成，它只会打印 100%，即使 json 有效负载大小 = 30MB

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())