如何在 Angular 7 中加快上传速度？答案

【问题标题】：How to make upload faster in angular 7?如何在 Angular 7 中加快上传速度？
【发布时间】：2020-10-06 23:49:30
【问题描述】：

我正在尝试加快上传速度。所以我尝试了不同的解决方案，包括后端和前端。那些是，

1)我上传了tar文件（已经压缩了）

2) 我尝试了块上传（按顺序），如果响应成功，将触发下一个 API。在后端，在同一个文件中，内容将被附加。

3) 我尝试了块上传，但同时，我一次发出 50 个请求来上传块内容（我知道，一次浏览器只处理 6 个请求）。在后端，我们分别存储所有块文件，在收到最终请求后，将所有这些块附加到单个文件中。

但观察到的是，我没有看到所有这些情况有太大的不同。

以下是我的服务文件

export class largeGeneUpload {

    chromosomeFile: any;
    options: any;
    chunkSize = 1200000;
    activeConnections = 0;
    threadsQuantity = 50;

    totalChunkCount = 0;
    chunksPosition = 0;
    failedChunks = [];


    sendNext() {
        if (this.activeConnections >= this.threadsQuantity) {
            return;
        }

        if (this.chunksPosition === this.totalChunkCount) {
            console.log('all chunks are done');
            return;
        }

        const i = this.chunksPosition;
        const url = 'gene/human';
        const chunkIndex = i;
        const start = chunkIndex * this.chunkSize;
        const end = Math.min(start + this.chunkSize, this.chromosomeFile.size);
        const currentchunkSize = this.chunkSize * i;
        const chunkData = this.chromosomeFile.webkitSlice ? this.chromosomeFile.webkitSlice(start, end) : this.chromosomeFile.slice(start, end);
        const fd = new FormData();
        const binar = new File([chunkData], this.chromosomeFile.upload.filename);
        console.log(binar);
        fd.append('file', binar);
        fd.append('dzuuid', this.chromosomeFile.upload.uuid);
        fd.append('dzchunkindex', chunkIndex.toString());
        fd.append('dztotalfilesize', this.chromosomeFile.upload.total);
        fd.append('dzchunksize', this.chunkSize.toString());
        fd.append('dztotalchunkcount', this.chromosomeFile.upload.totalChunkCount);
        fd.append('isCancel', 'false');
        fd.append('dzchunkbyteoffset', currentchunkSize.toString());

        this.chunksPosition += 1;
        this.activeConnections += 1;
        this.apiDataService.uploadChunk(url, fd)
            .then(() => {
                this.activeConnections -= 1;
                this.sendNext();
            })
            .catch((error) => {
                this.activeConnections -= 1;
                console.log('error here');
                // chunksQueue.push(chunkId);
            });

        this.sendNext();
    }


    uploadChunk(resrc: string, item) {
        return new Promise((resolve, reject) => {
            this._http.post(this.baseApiUrl + resrc, item, {
                headers: this.headers,
                withCredentials: true
            }).subscribe(r => {
                console.log(r);
                resolve();
            }, err => {
                console.log('err', err);
                reject();
            });
        });
}

但问题是，如果我在谷歌驱动器中上传相同的文件，它不会花费太多时间。

让我们考虑一下，我有 700 MB 的文件，将其上传到谷歌驱动器需要 3 分钟。但同样的 700 MB 文件与我的 Angular 代码一起上传到我们的后端服务器需要 7 分钟才能完成。

如何提高文件上传的性能？

【问题讨论】：

标签： javascript angular file file-upload

【解决方案1】：

原谅我，答案似乎很愚蠢，但这取决于您的托管基础设施

【讨论】：

【解决方案2】：

很多变量都可能导致这种情况，但根据您的故事，它与您的前端代码无关。将其分成块并没有帮助，因为浏览器有自己的优化算法来上传文件。最可能的罪魁祸首是您的后端服务器或从您的客户端到服务器的连接。

您说 google drive 速度很快，但您也应该知道 google 拥有非常广泛的全球基础架构以及顶级云服务器。例如，如果您使用的是每月 2 欧元的固定地点托管服务提供商，您就不能期望获得与 google 相同的处理能力和网络能力。

【讨论】：