javascript - 下载大文件时如何避免 504 Gateway Timeout 错误

Question

我有一个带有下载按钮的网络应用程序，当单击该按钮时，请求服务器将许多文件压缩成一个 zip 文件，然后下载大 (2GB) zip 文件。
后端使用 nginx 作为反向代理和 Flask。

我当前的客户端实现使用 XMLHttpRequest（参见下面的代码）。
如果文件很小，它会成功，但如果文件很大，我会从服务器收到504 网关超时错误。

我可以在我的 nginx 中增加超时时间，但我不知道这是否是一个好的解决方案。
它可以解决 2GB 文件的问题，但如果文件变成 5GB 等会发生什么。

我有一个粗略的想法，通过使用重新实现下载功能来解决问题

• 更现代的方法（例如 async 和 fetch 而不是 XMLHttpRequest）
• 管理大文件（可能使用 multipart 或 Content-Disposetion）

但我不知道该怎么做。
非常感谢任何对教程/示例实现的帮助或参考。

谢谢阿维
_

---

    this.saveFromWebServerToZipFile = async function (zipFilename) {

        return new Promise(function(resolve, reject) {
            let queryUrl = MLJ.core.Model.getUrlBase() + 'api/v1_2/download_sites_as_zip';

            var req = new XMLHttpRequest();
            req.open("GET", queryUrl, true);
            req.responseType = "blob";
            req.onload = function (event) {
                if (req.status === 200) {
                    var blob = req.response;
                    let fileName = 'zippedFiles.zip';
                    console.log('fileName', fileName); 
                    let link=document.createElement('a');
                    link.href=window.URL.createObjectURL(blob);
                    link.download=fileName;
                    link.click();
                    resolve(true);
                }
                else {
                    reject(req);
                }
            };

            req.send();
        });
    };

标签： javascriptweb-applications