如何使用 nativescript-background-http 获取总上传大小

Question

I have created file upload using angular and antivescript. When i am uploading single file currentBytes and totalBytes works ok - meaning: totalBytes does not change and currentBytes increasing. Situation is different with multi upload. When selecting multiple files looks like it starts to uploads chunks and totalBytes and currentBytes different every callback. It is impossible to do progress indicator this way. Any ideas how to get totalBytes of currentBytes consistant for multi-upload?

Also 'complete' is called multiple times - is there any other way rather then increment local variable and when its value equal to amount of files then call complete callback?

I would appreciate any help.

Here is my function:

uploadFiles(images: ImageAsset[]): Observable<ImageUploadResponse> {
        this.componentService.loadingIndicator.showMessage({ message: 'Uploading Images', showProgressIndicator: true });
        return new Observable<ImageUploadResponse>(observer => {
            const session = backgroundHttp.session('image-upload');
            const uploadParams = [];

            if (images.length === 0) {
                observer.next({ imageIds: [] });
                observer.complete();
                return;
            }

            let imagesUploadCompleted = 0;

            images.forEach(async image => {
                // const imageSource = await ImageSource.fromAsset(image);
                let localPath: any;

                if (platformModule.isAndroid) {
                    localPath = image.android;
                } /* else {
                    // selected_item.ios for iOS is PHAsset and not path - so we are creating own path
                    const folder = fileSystemModule.knownFolders.documents();
                    const path = fileSystemModule.path.join(folder.path, uuid.v1() + '.jpeg');
                    imageSource.saveToFile(path, 'jpeg');
                    localPath = path;
                } */

                uploadParams.push({ name: 'files', filename: localPath, mimeType: 'image/jpeg' });

                const request = {
                    url: `${environment.apiUrl}/upload`,
                    method: 'POST',
                    headers: { 'Content-Type': 'application/octet-stream' },
                    description: 'Uploading images'
                };

                const task = session.multipartUpload(uploadParams, request);

                task.on('progress', (e) => {
                    if (e.currentBytes) {
                        // console.log('progress ->', e.currentBytes);
                        this.ngZone.run(() => {
                            this.componentService.loadingIndicator.showProgress({ maxValue: e.totalBytes, value: e.currentBytes });
                        });
                    }
                });
                task.on('error', (e) => {
                    this.ngZone.run(() => {
                        observer.error(e.error);
                        observer.complete();
                    });
                });
                task.on('complete', (e: any) => {
                    imagesUploadCompleted++;

                    if (imagesUploadCompleted === images.length) {
                        this.ngZone.run(() => {
                            observer.next(JSON.parse(e.response.getBodyAsString()));
                            observer.complete();
                        });
                    }
                });

                // const file = fileSystemModule.File.fromPath(image['_android']);
                // paths.push(imageSource.toBase64String('jpeg', 60));*/
            });
        });
    }

Answer 1

Problem was, as Manoj said, requests were created in the loop.