我需要通过3个其他输入来上传3个文件。 我是Angular的新手-如果这个问题很愚蠢,对不起。
我的代码
BookFormComponent.ts:
export class BookFormComponent implements OnInit {
audioFile: File = null;
cueFile: File = null;
coverFile: File = null;
bookForm: FormGroup;
constructor(
private route: ActivatedRoute,
private bookService: BookService,
private formBuilder: FormBuilder
) {
}
ngOnInit() {
this.createForm();
this.pullBook();
}
pullBook() {
const id = this.route.snapshot.paramMap.get('id');
if (id != null) {
this.bookService.get(id).subscribe(
(book) => {
this.bookForm.controls['title'].setValue(book.title);
this.bookForm.controls['author'].setValue(book.author);
this.bookForm.controls['description'].setValue(book.description);
},
error => console.log('error: ' + error) /* TODO : Change all console log */
);
}
}
createForm() {
this.bookForm = this.formBuilder.group({
title: [''],
author: [''],
description: [''],
audio: [null],
cue: [null],
cover: [null]
});
}
onFileSelected(number: number, event) {
if (event.target.files && event.target.files.length) {
console.log(event.target.files);
switch (number) {
case 0: {
this.audioFile = event.target.files[0];
this.bookForm.controls['audio']
.setValue(this.audioFile ? this.audioFile.name : '');
break;
}
case 1: {
this.cueFile = event.target.files[1];
this.bookForm.controls['cue']
.setValue(this.cueFile ? this.cueFile.name : '');
break;
}
case 2: {
this.coverFile = event.target.files[2];
this.bookForm.controls['cover']
.setValue(this.coverFile ? this.coverFile.name : '');
break;
}
}
}
}
onSubmit() {
const fd = new FormData();
fd.append('author', this.bookForm.get('author').value);
fd.append('title', this.bookForm.get('title').value);
fd.append('description', this.bookForm.get('description').value);
fd.append('finished', 'false');
fd.append('audiobook', this.audioFile, this.audioFile.name);
fd.append('cue', this.cueFile, this.cueFile.name);
fd.append('cover', this.coverFile, this.coverFile.name);
this.bookService.create(fd).subscribe(
(book) => console.log(book),
error => console.log(error)
);
}
}
BookFormComponent.html:
<div class="row">
<div class="col-md-8 offset-md-2">
<h3>Utwórz książkę</h3>
<form [formGroup]="bookForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label for="title">Title</label>
<input id="title"
type="text"
class="form-control"
required
name="title"
formControlName="title">
</div>
<div class="form-group">
<label for="author">Author</label>
<input id="author"
type="text"
class="form-control"
required
name="author"
formControlName="author">
</div>
<div class="form-group">
<label for="description">Description</label>
<input id="description"
type="text"
class="form-control"
required
name="description"
formControlName="description">
</div>
<div class="form-group form-inline">
<label class="btn btn-secondary btn-file">
Audio
<input name="audio" type="file" (change)="onFileSelected(0, $event)">
<input type="hidden" name="audioHidden" formControlName="audio" required/>
</label>
<p *ngIf="audioFile" class="pl-4 align-middle mb-0">{{audioFile.name}}</p>
</div>
<div class="form-group form-inline">
<label class="btn btn-secondary btn-file">
Cue
<input name="cue" type="file" (change)="onFileSelected(1, $event)">
<input type="hidden" name="cueHidden" formControlName="cue" required/>
</label>
<p *ngIf="cueFile" class="pl-4 align-middle mb-0">{{cueFile.name}}</p>
</div>
<div class="form-group form-inline">
<label class="btn btn-secondary btn-file">
Cover
<input name="cover" type="file" (change)="onFileSelected(2, $event)">
<input type="hidden" name="coverHidden" formControlName="cover" required/>
</label>
<p *ngIf="coverFile" class="pl-4 align-middle mb-0">{{coverFile.name}}</p>
</div>
<button type="submit"
class="btn btn-success"
[disabled]="!bookForm.valid">
Submit
</button>
</form>
</div>
</div>
“ console.log(event.target.files);”中文件列表的长度始终为1。我想获取包含3个文件的列表-每个输入一个文件。我应该更改我的代码吗?
答案 0 :(得分:0)
在两种情况下,文件对象onFileSelected (number: number, event)
,you have to take the index 0
上的函数出现问题。
不要以为它是同一个文件,在每次调用另一个实例时,因此您始终必须使用索引0。
赞
export class BookFormComponent implements OnInit {
audioFile: File = null;
cueFile: File = null;
coverFile: File = null;
bookForm: FormGroup;
constructor(
private route: ActivatedRoute,
private bookService: BookService,
private formBuilder: FormBuilder
) {
}
ngOnInit() {
this.createForm();
this.pullBook();
}
pullBook() {
const id = this.route.snapshot.paramMap.get('id');
if (id != null) {
this.bookService.get(id).subscribe(
(book) => {
this.bookForm.controls['title'].setValue(book.title);
this.bookForm.controls['author'].setValue(book.author);
this.bookForm.controls['description'].setValue(book.description);
},
error => console.log('error: ' + error) /* TODO : Change all console log */
);
}
}
createForm() {
this.bookForm = this.formBuilder.group({
title: [''],
author: [''],
description: [''],
audio: [null],
cue: [null],
cover: [null]
});
}
onFileSelected(number: number, event) {
if (event.target.files && event.target.files.length) {
console.log(event.target.files);
switch (number) {
case 0: {
this.audioFile = event.target.files[0];
this.bookForm.controls['audio']
.setValue(this.audioFile ? this.audioFile.name : '');
break;
}
case 1: {
//you have to do this
this.cueFile = event.target.files[0];
this.bookForm.controls['cue']
.setValue(this.cueFile ? this.cueFile.name : '');
break;
}
case 2: {
//you have to do this
this.coverFile = event.target.files[0];
this.bookForm.controls['cover']
.setValue(this.coverFile ? this.coverFile.name : '');
break;
}
}
}
}
onSubmit() {
const fd = new FormData();
fd.append('author', this.bookForm.get('author').value);
fd.append('title', this.bookForm.get('title').value);
fd.append('description', this.bookForm.get('description').value);
fd.append('finished', 'false');
fd.append('audiobook', this.audioFile, this.audioFile.name);
fd.append('cue', this.cueFile, this.cueFile.name);
fd.append('cover', this.coverFile, this.coverFile.name);
this.bookService.create(fd).subscribe(
(book) => console.log(book),
error => console.log(error)
);
}
}