在Angular 6+中具有索引的多个文件上传

Question

我想将多对图像上传到后端。我正在使用反应形式来做到这一点。我想将图像编码为base64以传递到后端。以反应形式，该怎么做？请找到屏幕截图和代码。

Component.ts

import {Component, OnInit} from '@angular/core';
import {FormGroup, FormArray, FormControl} from '@angular/forms';

@Component({
selector: 'app-services-cu',
templateUrl: '../pages/fileuploader-cu.component.html'
 })

export class FileuploaderCuComponent implements OnInit {
uploader: FormGroup;

constructor() {
}

ngOnInit() {
  this.uploader = new FormGroup({
    sections: new FormArray([
      this.initSection(),
    ]),
  });
}

initSection() {
  return new FormGroup({
    beforeImage: new FormControl(''),
    afterImage: new FormControl('')
  });
}

addSection() {
  const control = <FormArray> this.uploader.get('sections');
  control.push(this.initSection());
}

getSections(form) {
  return form.controls.sections.controls;
}

removeSection(i) {
  const control = <FormArray> this.uploader.get('sections');
  control.removeAt(i);
}

onSubmit(form) {
  console.log(this.uploader);
}
}

Componet.html

    <div class="row">
  <div class="col-md-12 col-sm-12 col-xs-12">
    <div class="x_panel">
      <form [formGroup]="uploader" novalidate (ngSubmit)="onSubmit(uploader)">
        <!--- Section -->
        <div class="row">
          <div formArrayName="sections">
            <div class="row" *ngFor="let section of getSections(uploader); let i = index">
              <div class="col-md-12 col-sm-12 col-xs-12">
                <div [formGroupName]="i">
                  <!---Uploader Section -->
                  <div class="col-sm-12 col-md-4">
                    <div class="input-group margin-bottom-sm">
                      <label>Before:</label>
                      <input type="file" formControlName="beforeImage" accept=".jpeg, .jpg, .png" class="form-control">
                      <span style="font-size:12px;">(Formats:jpeg, jpg, png Size: 1MB)</span>
                    </div>
                  </div>
                  <div class="col-sm-12 col-md-4">
                    <div class="input-group margin-bottom-sm">
                      <label>Before:</label>
                      <input type="file" formControlName="afterImage" accept=".jpeg, .jpg, .png" class="form-control">
                      <span style="font-size:12px;">(Formats:jpeg, jpg, png Size: 1MB)</span>
                    </div>
                  </div>
                  <!---End of Uploader Section -->
                </div>
                <br>
                <button type="button" (click)="addSection()" class="btn btn-info btn-sm">Add More</button>
                <button type="button" class="btn btn-danger btn-sm" *ngIf="getSections(uploader).length > 1"
                        (click)="removeSection(i)">Remove Section
                </button>
              </div>
            </div>
          </div>
        </div>
        <!-- End Section -->
      </form>
      <pre> {{uploader.value | json}} </pre>
    </div>
  </div>
</div>

在上面的代码中，我使用反应形式来重复字段。选择文件后，应保存base64编码值而不是图像路径。