1

我正在实现一个文件上传器，用户可以在其中上传一个或多个文件，使用XMLHttpRequest. 我没有使用fetch，因为我需要能够向用户提供有关上传进度的视觉反馈。

413 Payload Too Large当服务器在上传完成之前停止处理上传时（例如，如果上传的文件太大，则关闭连接并出现错误），就会出现我遇到的问题。如果在使用 Safari 或 Chrome 时出现这样的错误，他们将按我的意图停止上传。

然而，在 Firefox 中，它似乎忽略了这一点，并在停止之前重试了几次上传。

我的代码如下：

// Initialize a new request object.
let req = new XMLHttpRequest();

// Set expected response as JSON.
req.responseType = 'json';

// Set event handlers.
req.upload.onreadystatechange = function(e) { console.log(e.type); }
req.upload.onuploadstart = function(e) { console.log(e.type); }
req.upload.onprogress = function(e) { console.log(e.type); }
req.upload.onabort = function(e) { console.log(e.type); }
req.upload.onload = function(e) { console.log(e.type); }
req.upload.ontimeout = function(e) { console.log(e.type); }
req.upload.onuploadend = function(e) { console.log(e.type); }

// Open request, set request header.
req.open('POST', '/some-endpoint', true);
req.setRequestHeader('Content-type', 'multipart/form-data;boundary=---some-boundary---');

// Create FormData object to submit.
let fd = new FormData(formElement);

// Send data.
req.send(fd);

在 Safari 和 Chrome 中，当我上传的文件太大而服务器无法接受时，导致服务器以 413 状态响应关闭连接，事件按以下顺序触发：

loadstart
progress (multiple)
Failed to load resource (413 Request Entity Too Large)

正如我所料。在 Firefox 中，事件按以下顺序触发：

loadstart
progress (multiple, ignoring connection closes and restarting upload multiple times)
loadend

如文档中所述， Firefox 似乎没有在事件之前触发load、error、abort或事件timeoutloadendXMLHttpRequest.upload

查看每个浏览器开发工具的网络选项卡表明 Chrome 和 Safari 都识别出服务器已响应 413，但 Firefox 未识别任何响应状态（即使在 之后loadend）。

版本为 Firefox Quantum 62.0b3（64 位）。Safari 是 11.0.1。铬是 67.0.3396.99。

那么问题来了：为什么 Firefox 无法识别上传过程中发生服务器错误并取消上传，而 Safari 和 Chrome 可以呢？有没有办法解决这个问题？

4

1 回答 1

0

正如Cody G. 所暗示的，这可能是 Firefox 中的一个错误或与错误有关。

这没有回答最初的问题。但是，它确实提供了一种解决方法，并希望为其他人提供一些可能具有启发性的信息。

Firefox、Safari 和 Chrome 在上传成功时都会以相同的顺序触发事件（即，当服务器在上传完成之前没有发回响应或关闭连接时）。该命令是：

readystatechange (readyState = 1)
loadstart
progress (1...n times)
load
loadend
readystatechange (readyState = 2)
readystatechange (readyState = 4)

...正如预期的那样。

当上传失败时（即服务器关闭连接并发回响应），Safari 和 Chrome 会以相同的顺序触发事件。该命令是：

readystatechange (readyState = 1)
loadstart
progress (1...n times)
[the server responds with an error, which does *not* trigger an error event]
readystatechange (readyState = 2)
readystatechange (readyState = 3)
readystatechange (readyState = 4)

另一方面，Firefox 在上传失败时按此顺序触发事件：

readystatechange (readyState = 1)
loadstart
progress (1...n times, including retrying from the start more than once when the server responds or closes the connection)
readystatechange (readyState = 2)
readystatechange (readyState = 3)
readystatechange (readyState = 4)
error
loadend

我防止 Firefox 无缘无故多次重启上传的解决方法是包含一个变量来跟踪先前加载的数量：

let prevLoaded = 0;
xhr.upload.addEventListener('progress', function(e) {
    if (prevLoaded !== 0 && e.loaded <= prevLoaded) {
        xhr.abort();
        return;
    }
    prevLoaded = e.loaded;
}, false);

这会导致请求被取消。Safari 和 Chrome 不会运行此代码，因为其他事件会先触发。使用此代码，Firefox 的不成功上传事件触发顺序变为：

readystatechange (readyState = 1)
loadstart
progress (1...n times, but almost always stopping after the server closes the connection or responds with an error)
readystatechange (readyState = 4)
abort
loadend
于 2018-06-29T14:49:52.757 回答