Как вызвать метод для запуска всех экземпляров индекса

Question

В настоящее время я создаю приложение, которое может делать фотографии, затем сохранять их на устройстве и затем загружать позже. Я сделал так далеко, что могу отправлять отдельные фотографии в бэкэнд, но хотел бы знать, как я могу l oop просмотреть список индексов и, если возможно, отправить все фотографии из списка в бэкэнд с помощью цикла тщательный метод 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.');
        }  
    );
}

изображение, видимое на телефоне.

Answer 1

Если вы превратили этот бит Angular:

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

... в примерно эквивалентный TypeScript:

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

... что-то вроде это должно работать. Просто создайте startUploadAll метод, вызываемый некоторым действием (click) в новой кнопке или ссылке.

Конечно, потребуется немного больше работы, если вы хотите сгруппировать сообщения о тостах, чтобы отразить прогресс или успех на всей совокупности образов.