Angular 6 Reactive从多个文件上传到api

Question

我正在使用反应形式创建角度为6的文件上传器。选择所有文件后，我将有一个上传按钮来首先上传文件。但问题是，我无法从组件中获取所有文件。我必须使用该事件来获取选择的文件。有没有办法在不使用事件的情况下获取文件？

import {Component, OnDestroy, OnInit, ElementRef, ViewChild} from '@angular/core';
import {Router, ActivatedRoute} from '@angular/router';
import {FileuploaderService} from '../fileuploader.service';
import {CountryService} from '../../country/country.service';
import {ServicelocationsService} from '../../servicelocations/servicelocations.service';
import {CategoriesService} from '../../categories/categories.service';
import {FormBuilder, FormGroup, Validators, FormArray, FormControl} from '@angular/forms';

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

export class FileuploaderCuComponent implements OnInit {
  uploaderForm: FormGroup;
  submitted = false;
  profilepicSize = 0;
  valueofItem = 0;
  beforeorafterImage = '';

  constructor(private formBuilder: FormBuilder) {
  }

  ngOnInit() {
    this.uploaderForm = this.formBuilder.group({
      firstName: ['', Validators.required],
      lastName: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]],
      password: ['', [Validators.required, Validators.minLength(6)]],
      sections: new FormArray([
        this.initSection(),
      ]),
    });
  }

  // convenience getter for easy access to form fields
  get f() {
    return this.uploaderForm.controls;
  }

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

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

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

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

  uploadImagepair(i) {
    const control = <FormArray> this.uploaderForm.get('sections');
    // I want to get all files here and convert them into base64 encode
  }

  onSubmit() {
    this.submitted = true;
    // stop here if form is invalid
    if (this.uploaderForm.invalid) {
      return;
    }
    alert('SUCCESS!! :-)\n\n' + JSON.stringify(this.uploaderForm.value));
  }
}

Html文件

    <div class="row">
  <div class="col-md-12 col-sm-12 col-xs-12">
    <div class="x_panel">

      <form [formGroup]="uploaderForm" (ngSubmit)="onSubmit()">
        <div class="row">
          <div class="col-md-12">
            <div class="form-group">
              <label>First Name</label>
              <input type="text" formControlName="firstName" class="form-control"
                     [ngClass]="{ 'is-invalid': submitted && f.firstName.errors }"/>
              <div *ngIf="submitted && f.firstName.errors" class="invalid-feedback">
                <div *ngIf="f.firstName.errors.required" style="color: red;">First Name is required</div>
              </div>
            </div>
            <div class="form-group">
              <label>Last Name</label>
              <input type="text" formControlName="lastName" class="form-control"
                     [ngClass]="{ 'is-invalid': submitted && f.lastName.errors }"/>
              <div *ngIf="submitted && f.lastName.errors" class="invalid-feedback">
                <div *ngIf="f.lastName.errors.required" style="color: red;">Last Name is required</div>
              </div>
            </div>
            <div class="form-group">
              <label>Email</label>
              <input type="text" formControlName="email" class="form-control"
                     [ngClass]="{ 'is-invalid': submitted && f.email.errors }"/>
              <div *ngIf="submitted && f.email.errors" class="invalid-feedback">
                <div *ngIf="f.email.errors.required">Email is required</div>
                <div *ngIf="f.email.errors.email" style="color: red;">Email must be a valid email address</div>
              </div>
            </div>
            <div class="form-group">
              <label>Password</label>
              <input type="password" formControlName="password" class="form-control"
                     [ngClass]="{ 'is-invalid': submitted && f.password.errors }"/>
              <div *ngIf="submitted && f.password.errors" class="invalid-feedback">
                <div *ngIf="f.password.errors.required">Password is required</div>
                <div *ngIf="f.password.errors.minlength" style="color: red;">Password must be at least 6 characters
                </div>
              </div>
            </div>
          </div>
        </div>

        <!--- Section -->
        <div class="row">
          <div formArrayName="sections">
            <div class="row" *ngFor="let section of getSections(uploaderForm); let i = index">
              <div class="col-md-12 col-sm-12 col-xs-12">
                <div [formGroupName]="i">
                  <input type="hidden" id="pair_id" name="pair_id" value="{{i}}"/>
                  <!---Uploader Section -->
                  <div class="col-sm-12 col-md-4">
                    <div class="input-group margin-bottom-sm">
                      <label>{{i}} 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>After: </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>
                <div class="col-sm-12 col-md-4">
                  <div class="input-group margin-bottom-sm">
                    <button type="button" (click)="addSection()" class="btn btn-info btn-sm"><i class="fa fa-plus"></i>
                      Add
                    </button>
                    <button type="button" class="btn btn-danger btn-sm" *ngIf="getSections(uploaderForm).length > 1"
                            (click)="removeSection(i)"><i class="fa fa-remove"></i> Delete
                    </button>
                    <button type="button" (click)="uploadImagepair(i)" class="btn btn-success btn-sm"><i
                      class="fa fa-upload"></i> Upload
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- End Section -->
        <hr>

        <div class="row">
          <div class="col-md-12">
            <button class="btn btn-primary pull-right" [disabled]="loading" type="submit">
              Submit
            </button>
          </div>
        </div>
      </form>

    </div>
  </div>
</div>

Answer 1

您可以在FormControl中获取fileobject，只需将此属性设置为“writeFile =”true“'。这可以将FormControl中的FileList对象写为值。要实现这一点，您需要安装“@ rxweb / reactive-form-validators”包并注册“RxReactiveFormsModule”模块。而已。

我已复制您的代码并创建了stackblitz示例，我在HTML中添加了该属性。

更改后的代码如下：

 <!---Uploader Section -->
<div class="col-sm-12 col-md-4">
<div class="input-group margin-bottom-sm">
	<label>{{i}} Before: </label>
	<input type="file" [writeFile]="true" 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>After: </label>
	<input type="file" [writeFile]="true"  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 -->

请参考stackblitz example