为什么 ProgressEvent.lengthComputable 为假？

Question

我正在 Google Chrome、Safari 和 Firefox 中使用 XMLHttpRequest 加载 JSON 文件。在所有三个浏览器中，我都收到了ProgressEvents，它正确显示了.loaded 属性。但是，.lengthComputable 属性为 false，.total 属性为零。我检查了Content-Length HTTP 标头是否正在发送并且是正确的 - 是的。响应是 gzip 编码的，但 Content-length 正确显示了编码长度（解压缩前）。

为什么我的ProgressEvents 中没有总长度？

这是标题：

HTTP/1.1 200 OK
ETag: "hKXdZA"
Date: Wed, 20 Jun 2012 20:17:17 GMT
Expires: Wed, 20 Jun 2012 20:17:17 GMT
Cache-Control: private, max-age=3600
X-AppEngine-Estimated-CPM-US-Dollars: $0.000108
X-AppEngine-Resource-Usage: ms=2 cpu_ms=0 api_cpu_ms=0
Content-Type: application/json
Content-Encoding: gzip
Server: Google Frontend
Content-Length: 621606

注意：该文件是通过 Google App Engine 提供的。

这里是 JavaScript：

var req;
if (window.XMLHttpRequest){
    req = new XMLHttpRequest();
    if(req.overrideMimeType){
        req.overrideMimeType( "text/json" );
    }
}else{
    req = new ActiveXObject('Microsoft.XMLHTTP');
}

// Listen for progress events
req.addEventListener("progress", function (event) {
    console.log(event, event.lengthComputable, event.total);
    if (event.lengthComputable) {
        self.progress = event.loaded / event.total;
    } else if (this.explicitTotal) {
        self.progress = Math.min(1, event.loaded / self.explicitTotal);
    } else {
        self.progress = 0;
    }
    self.dispatchEvent(Breel.Asset.ON_PROGRESS);
}, false);

req.open('GET', this.url);

注意：该代码中的console.log 显示数百个事件，其中.loadeds 是最新的，但.lengthComputable 始终为假，.total 始终为零。 self 指的是负责这个XMLHttpRequest 的对象。

Answer 1

如果 XMLHttpRequestProgressEvent 中的 lengthComputable 为 false，则意味着服务器从未在响应中发送 Content-Length 标头。

如果您使用 nginx 作为代理服务器，这可能是罪魁祸首，尤其是如果它没有将上游服务器的 Content-Length 标头通过代理服务器传递到浏览器。

Answer 2

同时 2017 年，Firefox 的情况还不错，但 Chrome 没有显示 gzip 内容的进度。

这似乎是由于规范曾经不清楚loaded 和total 是指压缩的还是未压缩的内容。 Since 2014 年 6 月 26 日 the XMLHttpRequest specifications 明确他们应该指的是传输（压缩）的内容：

6.1。使用ProgressEvent 接口触发事件

[...] 给定 transmitted 和 length [...] 触发事件 [...] ProgressEvent，loaded 属性已初始化到 transmitted，如果 length 不为 0，则 lengthComputable 属性初始化为 true，total 属性初始化为 length。

但是，2015 Chromium 错误报告 "XHR's progress events should handle gzipped content" 解释说情况有所不同，并指出：

编码时，total 保持为 0 且 lengthComputable 未设置

事件本身仍然被触发，event.loaded 仍然被填充。但是 Chrome 正在动态解压缩 gzip 的内容，并且（今天）将 loaded 设置为解压缩后的长度，而不是 transmitted 长度。这不能与Content-Length 标头的值进行比较，因为这是压缩 内容的长度，所以loaded 将变得大于内容长度。

假设 Chrome 的动态解压缩不会改变。

我不知道 Chrome 对 Content-Encoding 的其他值做了什么。

Answer 3

使用 req.upload.addEventListener 进行上传

req.addEventListener event.lengthComputable 将始终为 false

req.upload.addEventListener("progress", function (event) {
    console.log(event, event.lengthComputable, event.total);
    if (event.lengthComputable) {
        self.progress = event.loaded / event.total;
    } else if (this.explicitTotal) {
        self.progress = Math.min(1, event.loaded / self.explicitTotal);
    } else {
        self.progress = 0;
    }
    self.dispatchEvent(Breel.Asset.ON_PROGRESS);
}, false);

Answer 4

只需在 PHP 或 apache/nginx 中设置

header("Content-Encoding: none");

问题解决了。

Answer 5

在控制器代码中设置 Content-Length。这将设置event.lengthComputable。

var fileSize = new FileInfo(filePathAbs).Length;
context.Response.AddHeader("Content-Length", fileSize.ToString());
context.Response.AddHeader("content-disposition", "inline;filename=" + fileName);

var req = new XMLHttpRequest();

req.open('GET', '/EReader/GetDocument?p=@Model.EncodedTempFilePath');
req.responseType = "arraybuffer";
req.onprogress = function (event) { 
    if (event.lengthComputable) {
        percentage = Math.floor(event.loaded * 100 / event.total); // give the percentage
        var elem = document.getElementById("bar");
        elem.style.width = percentage + '%';
    }
};