javascript - 如何在 Angular 7 中加快上传速度？

问题描述

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

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 分钟。但是，与我的 Angular 代码一起上传到后端服务器的同一个 700 MB 文件需要 7 分钟才能完成。

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

标签： javascriptangularfilefile-upload

javascript - 如何在 Angular 7 中加快上传速度？

问题描述

解决方案

推荐阅读