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

问题描述

我已经使用 angular 和 antivescript 创建了文件上传。当我上传单个文件时，currentBytes 和 totalBytes 工作正常 - 意思是：totalBytes 不会改变，currentBytes 会增加。多重上传的情况不同。选择多个文件时，看起来它开始上传块，总比特和当前比都不同。以这种方式做进度指示器是不可能的。任何想法如何让 currentBytes 的 totalBytes 一致以进行多次上传？

'完成'也被多次调用 - 有没有其他方法而不是增加局部变量，当它的值等于文件数量时，然后调用完成回调？

我将不胜感激任何帮助。

这是我的功能：

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));*/
            });
        });
    }

标签： angularfile-uploadprogress-barnativescriptnativescript-background-http

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

问题描述

解决方案

推荐阅读