XMLHttpRequest - event.loaded 和 event.total 值的问题答案

【问题标题】：XMLHttpRequest - a problem with event.loaded and event.total valuesXMLHttpRequest - event.loaded 和 event.total 值的问题
【发布时间】：2022-02-21 01:01:55
【问题描述】：

我使用 XMLHttpRequest 进行文件上传，在浏览器中我有一个进度条，显示已经上传了多少图像。

  xhr.upload.addEventListener('progress', onprogressHandler, false);

  function onprogressHandler(event) {    
    resp.innerHTML = event.loaded +' and '+ event.total;

    var percent = Math.round((event.loaded / event.total) * 100);
    var calc_display = document.getElementById('calc');
    calc_display.innerHTML = percent;
  };

如果我选择上传图片并发送表单，那么我看到的event.loaded 和event.total 的值总是相同的。我认为event.total 的值是文件的大小。

我是新手，所以我没有太多经验，但我怎么可能始终拥有相同的价值观？（通常约为 2.700.000 kB）

哪里有问题？

【问题讨论】：

标签： javascript ajax event-handling xmlhttprequest dom-events

【解决方案1】：

progress event spec 提到进度事件也可以具有布尔值 .lengthComputable 属性。如果该属性在进度事件中为 false，我希望 event.loaded 和 event.total 的值不会反映上传进度。

规范说.lengthComputable 为真，如果设置了XMLHttpRequest 的Content-Length 标头，.total 将反映文件的长度。事实证明，XMLHttpRequest will not allow setting Content-Length——在该锚点下方搜索Content-Length。大概他们这样做是因为脚本可能会错误地计算它正在发送的数据的长度，而用户代理不太可能这样做。

查看您的服务器正在接收的请求。他们有Content-Length 标头吗？

【讨论】：

嗨，埃利斯本，是的。如果我将发送表单并查看控制台，那么我会看到Content-Length 2730561 X-File-Name SDC10289-1.JPG Content-Type image/jpeg 和Content-Length 我已设置为xhr.setRequestHeader("Content-Length", file.size);。又会出什么问题？
首先，请使用console.log(percent); 或calc_display.innerHTML += percent + "<br/>";，这样您就可以确保该值没有改变。尝试分别记录并查看event.lengthComputable、event.loaded 和event.total 的值以及您的percent 值，例如console.log([percent, event.lengthComputable, event.loaded, event.total]);；告诉我你发现了什么。
好的，我做了你写给我的一切。首先 - 值仍然相同（仍然是“100”）。我尝试记录percent 和events，我得到：[52, true, 1408556, 2684842] 和[100, true, 2684842, 2684842]。在萤火虫中我看到POST /photos/upload 200 OK 2778ms，但在我的页面上我只看到数字 100 (%)
我现在认为您的代码运行良好，我愚蠢地忽略了简单的解释。您是否尝试过calc_display.innerHTML += percent + "<br/>"; 而不是calc_display.innerHTML = percent;？这应该会在您的页面上显示与您在控制台中看到的一样多的百分比值。
是的，我做到了，我得到了这个：[23, true, 638716, 2772369] [65, true, 1800680, 2772369] [100, true, 2772369, 2772369] (23% - 65% - 100%)。但我看到值 100% 然后上传在接下来的 2-3 秒内完成......这看起来不太好。

【解决方案2】：

如果您上传的视频/图像尺寸较小，值可能相同。您可以通过上传大小超过 70MB 的视频来检查并检查您的加载值和总值，它应该为您提供不同的总值和加载值

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。