如何调用方法以运行索引的所有实例

Question

我目前正在构建一个可以拍照、保存到设备并稍后上传的应用程序。我已经做到了这一点，我可以将单张照片发送到后端，但想知道如何循环遍历索引列表，如果可能的话，通过遍历 startUpload 将列表中的所有照片发送到后端方法。还是有更好更聪明的方法来做到这一点？

.html

<ion-content>
    <div class="ion-padding">
    <h3 *ngIf="images.length == 0" class="ion-text-center">No images available to upload!</h3>
    <ion-list>
        <ion-item *ngFor="let img of images; index as pos" class="ion-text-wrap">
        <ion-thumbnail slot="start">
            <ion-img [src]="img.path"></ion-img>
        </ion-thumbnail>
        <ion-button slot="end" fill="clear" (click)="startUpload(img, pos)">
            <ion-icon slot="icon-only" src="assets/upload.svg"></ion-icon>
            </ion-button>
        <ion-button slot="end" fill="clear" (click)="deleteImage(img, pos)">
            <ion-icon slot="icon-only" name="trash"></ion-icon>
        </ion-button>
        </ion-item>
    </ion-list>
    </div>
</ion-content>

.ts

startUpload(imgEntry, posImport) {
    this.pos = posImport;
    this.imgImport = imgEntry;
    this.file.resolveLocalFilesystemUrl(imgEntry.filePath)
    .then(entry => {
        ( < FileEntry > entry).file(file => this.readFile(file) )
    })
    .catch(err => {
        this.presentToast(err);
    });
}

async readFile(file: any) {
    const reader = new FileReader();
    reader.readAsArrayBuffer(file);   
    reader.onloadend = () => {
    const formData = new FormData();
    const imgBlob = new Blob([reader.result], {type: file.type});
    formData.append('plupload', imgBlob, file.name);
    this.fileNamePass = file.name;
    this.uploadImageData(formData);
    };
}

async uploadImageData(formData: FormData) {
    const headers =  this.headerLink
    const loading = await this.loadingController.create({
    message: 'Uploading image...',
    });
    await loading.present();
    this.httpClient.post<any>( this.atachmentUrl, formData, {
    headers})

    .pipe( finalize(() => { loading.dismiss(); })  
    ).subscribe(
        res => {
        let response = JSON.stringify(res);
        if (res ["error"] ) {
            this.presentToast('File upload failed');
            } else {
            this.presentToast('File upload success.');
            }
        },
        (err: HttpErrorResponse) => {
            this.presentToast('File upload failed.');
        }  
    );
}

在 phone.

上看到的图像

Answer 1

如果你转动了 Angular 的这一点：

*ngFor="let img of images; index as pos"

...大致相当于 TypeScript：

  startUploadAll(): void {
    this.images.forEach((img, pos) => startUpload(img, pos));
  }

...类似的东西应该有用。只需在新按钮或 link.

中使 startUploadAll 某些 (click) 操作调用的方法

当然，如果您想要将 toast 消息分组以共同反映整组图像的进展或成功，这将需要更多的工作。

如何调用方法以运行索引的所有实例

How do call a method to run all instances of an index

typescript

ionic4

如何调用方法以 运行 索引的所有实例

How do call a method to run all instances of an index

typescript

ionic4

如何调用方法以运行索引的所有实例