我正在使用反应形式以角度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>
答案 0 :(得分：0)
您可以在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 -->