具有角度反应形式的多个文件上传 [英] multiple file upload with angular reactive forms
问题描述
我正在尝试在Angular 6中构建一个表单,该表单提供一个文件选择框,该框允许用户选择多个文件(Stackblitz: https://stackblitz.com/edit/angular-yjummp ).
I am trying to build a form in Angular 6 that offers a file selection box that allows the user to select multiple files (Stackblitz: https://stackblitz.com/edit/angular-yjummp).
模板如下:
<form [formGroup]="form">
<input id="files" formControlName="files" type="file" accept="image/*,video/*" multiple (change)="onFilesChanged($event)"/>
</form>
我正在这样用TypeScript构建表单:
I am building the form in TypeScript like this:
public form = new FormGroup({
files: new FormControl('')
});
public onFilesChanged(event: any): void {
console.log(event.target.files);
console.log(this.form.value);
}
现在,在onFilesChanged
处理程序中,可以通过访问event.target.files
(显然)从事件中正确检索所选文件,但是打印表单值仅打印一个文件.我也尝试过使用FormArray
的多种方法,但到目前为止还没有运气.
Now, in the onFilesChanged
Handler, the selected files can be correctly retrieved from the event by accessing event.target.files
(obviously), but printing the form value only prints one file. I have been trying a number of ways using FormArray
as well, but had no luck so far.
有什么想法吗?非常感谢!
Any ideas? Many thanks!
推荐答案
以下是我如何通过角度反应形式实现多个照片上传输入文件的示例.
Below is example that how I achieved multiple photo upload input file through angular reactive forms.
public demoForm: FormGroup;
constructor(private formBuilder: FormBuilder) {
this.demoForm = this.formBuilder.group({
text_input: ['', Validators.required],
photos: this.formBuilder.array([])
});
}
// We will create multiple form controls inside defined form controls photos.
createItem(data): FormGroup {
return this.formBuilder.group(data);
}
//Help to get all photos controls as form array.
get photos(): FormArray {
return this.demoForm.get('photos') as FormArray;
};
detectFiles(event) {
let files = event.target.files;
if (files) {
for (let file of files) {
let reader = new FileReader();
reader.onload = (e: any) => {
this.photos.push(this.createItem({
file,
url: e.target.result //Base64 string for preview image
}));
}
reader.readAsDataURL(file);
}
}
}
在html组件中
<input type="file" class="custom-file-input form-control" id="files" multiple (change)="detectFiles($event)" accept="image/x-png,image/jpeg">
<div class="images-preview mt-2" *ngIf="photos.length">
<div formArrayName="photos" *ngFor="let photo of photos.controls; let i = index;">
<div [formGroupName]="i">
<img [src]="photo.controls.url.value" class="card-img-top" alt="Image Preview">
</div>
</div>
</div>
如果不想显示预览,则可以避免使用html.提交表单后,您将获得如下所示的值.
You can avoid html if you do not want to show preview. On submit of form you will be get values like below.
{
text_input: "",
photos: [
{
file: <File Object>,
url: <Base64 String here>
},
{
file: <File Object>,
url: <Base64 String here>
},
....
]
}
修改 这是 stackblitz示例
我希望它能对您和其他人有所帮助. 谢谢.
I hope it will helps you and also other peoples. Thanks.
这篇关于具有角度反应形式的多个文件上传的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!