我在Django中创建了一个API，用于提交效果很好的文档。我想将其连接到AngularJS前端，并将文档从前端发送到API，当我试图这样做时，同一文件正在数据库中以不同的名称提交，尽管我想要有关其原始名称的不同文件。不知道这是怎么回事。
我的.ts文件如下：
import { Component, OnInit } from '@angular/core';
import { UsersService } from 'src/app/services/users.service';
@Component({
selector: 'higherstudiesdocuments',
templateUrl: './higherstudiesdocuments.component.html',
styleUrls: ['./higherstudiesdocuments.component.scss'],
providers: [UsersService]
})
export class HigherstudiesdocumentsComponent implements OnInit {
selectedFile: File = null;
constructor(private userService: UsersService) { }
ngOnInit() {
}
onFileSelected(event) {
this.selectedFile = <File>event.target.files[0];
}
onSubmit() {
const formData = new FormData();
formData.append('admission_letter', this.selectedFile, this.selectedFile.name);
formData.append('award_letter', this.selectedFile, this.selectedFile.name);
formData.append('attested_degree', this.selectedFile, this.selectedFile.name);
formData.append('cv', this.selectedFile, this.selectedFile.name);
formData.append('travel_agent', this.selectedFile, this.selectedFile.name);
formData.append('surety_bond', this.selectedFile, this.selectedFile.name);
formData.append('attested_surety_bond', this.selectedFile, this.selectedFile.name);
formData.append('guarantee_cnic', this.selectedFile, this.selectedFile.name);
formData.append('study_leave', this.selectedFile, this.selectedFile.name);
formData.append('objection_certificate', this.selectedFile, this.selectedFile.name);
formData.append('hod_form', this.selectedFile, this.selectedFile.name);
formData.append('rector_form', this.selectedFile, this.selectedFile.name);
this.userService.higherStudiesphdDocuments(formData).subscribe(
response => {
console.log(response);
}
);
}
logout() {
return this.userService.logout();
}
}
和html文件如下：
<navbar></navbar>
<div class="form-group row" id="myclass">
<a (click)="logout()">Log Out</a>
</div>
<div class="container-fluid px-xl-5">
<section class="py-5">
<div class="row">
<div class="col-lg-12 mb-5">
<!-- First Box -->
<div class="card">
<div class="card-header">
<h3 class="h6 text-uppercase mb-0">To proceed for Ph.D.</h3>
</div>
<div class="card-body">
<form class="form-horizontal">
<div class="form-group row">
<label class="col-md-6 form-control-label">Unconditional admission letter from Foreign University offering you admission in Ph.D.</label>
<div class="col-md-3">
<input class="validate" (change)="onFileSelected($event)" name="admissionletter" type="file" class="form-control" required>
</div>
</div>
<div class="line"></div>
<div class="form-group row">
<label class="col-md-6 form-control-label">Copy of your award letter for scholarship or financial assistance or affidavit about self-finance.</label>
<div class="col-md-3">
<input class="validate" (change)="onFileSelected($event)" name="presentationmode" type="file" class="form-control" required>
</div>
</div>
<div class="line"></div>
<div class="form-group row">
<label class="col-md-6 form-control-label">Copy of your highest Degree duly attested by HEC.</label>
<div class="col-md-3">
<input class="validate" (change)="onFileSelected($event)" name="evidence" type="file" class="form-control" required>
</div>
</div>
<div class="line"></div>
<div class="form-group row">
<label class="col-md-6 form-control-label">Brief CV (2-3 pages).</label>
<div class="col-md-3">
<input class="validate" (change)="onFileSelected($event)" name="evidencepublish" type="file" class="form-control" required>
</div>
</div>
<div class="line"></div>
<div class="form-group row">
<label class="col-md-6 form-control-label">Quotation from the travel agent indicating the shortest route.</label>
<div class="col-md-3">
<input class="validate" (change)="onFileSelected($event)" name="eventbrochure" type="file" class="form-control" required>
</div>
</div>
<div class="line"></div>
<div class="form-group row">
<label class="col-md-6 form-control-label">Proof of the Surety bond of Rs.100/- by two guarantors to be purchased in the name of guarantor(s).</label>
<div class="col-md-3">
<input class="validate" (change)="onFileSelected($event)" name="fulltextpaper" type="file" class="form-control" required>
</div>
</div>
<div class="line"></div>
<div class="form-group row">
<label class="col-md-6 form-control-label">Surety Bond attested by the Oath Commissioner and countersigned by First Class Magistrate.</label>
<div class="col-md-3">
<input class="validate" (change)="onFileSelected($event)" name="co-aurthornoc" type="file" class="form-control" required>
</div>
</div>
<div class="line"></div>
<div class="form-group row">
<label class="col-md-6 form-control-label">Copy of CNIC of Guarantee</label>
<div class="col-md-3">
<input class="validate" (change)="onFileSelected($event)" name="agentquotation" type="file" class="form-control" required>
</div>
</div>
<div class="line"></div>
<div class="form-group row">
<label class="col-md-6 form-control-label">Copy of study leave from your employer (required from applicant employed in any organization).</label>
<div class="col-md-3">
<input class="validate" (change)="onFileSelected($event)" name="study_leave" type="file" class="form-control" required>
</div>
</div>
<div class="line"></div>
<div class="form-group row">
<label class="col-md-6 form-control-label">Copy of No Objection Certificate (NOC) from your employer (required from applicants employed in any organization).</label>
<div class="col-md-3">
<input class="validate" (change)="onFileSelected($event)" name="cv" type="file" class="form-control" required>
</div>
</div>
<div class="line"></div>
<div class="form-group row">
<label class="col-md-6 form-control-label">Application form duly signed and stamped by the Head of Department in Section No. 6 (required from applicant employed in any organization).</label>
<div class="col-md-3">
<input class="validate" (change)="onFileSelected($event)" name="cv" type="file" class="form-control" required>
</div>
</div>
<div class="line"></div>
<div class="form-group row">
<label class="col-md-6 form-control-label">Application form duly signed and stamped by the Rector/Vice-Chancellor of your university in Section No. 7 (required from applicant employed in any organization).</label>
<div class="col-md-3">
<input class="validate" (change)="onFileSelected($event)" name="cv" type="file" class="form-control" required>
</div>
</div>
<div class="line"></div>
</form>
</div>
</div>
<div class="line"></div>
<div class="form-group row">
<div class="col-md-12" style="text-align: center;">
<button (click)="onSubmit()" type="submit" class="btn btn-primary shadow">SUBMIT AND APPLY</button>
</div>
</div>
</div>
</div>
</section>
</div>
答案 0 :(得分：0)
您仅使用一个变量（this.selectedFile）来保留每个文档，而每个文档都需要一个变量。
类似这样的东西：
@Component({
selector: 'higherstudiesdocuments',
templateUrl: './higherstudiesdocuments.component.html',
styleUrls: ['./higherstudiesdocuments.component.scss'],
providers: [UsersService]
})
export class HigherstudiesdocumentsComponent implements OnInit {
selectedFiles: { [key: string]: File } = {};
constructor(private userService: UsersService) {}
ngOnInit() {}
onFileSelected(event, documentKey: string) {
const file = <File>event.target.files[0];
this.selectedFiles[documentKey] = file;
}
onSubmit() {
const formData = new FormData();
Object.keys(this.selectedFiles).forEach(documentKey => {
let file = this.selectedFiles[documentKey];
formData.append(documentKey, file, file.name);
});
this.userService.higherStudiesphdDocuments(formData).subscribe(response => {
console.log(response);
});
}
logout() {
return this.userService.logout();
}
}
，对于每个输入文件，将documentKey传递给处理程序，如下所示：
<div class="form-group row">
<label class="col-md-6 form-control-label">Unconditional admission letter from Foreign University offering you admission in Ph.D.</label>
<div class="col-md-3">
<input class="validate" (change)="onFileSelected($event, 'admissionletter')" name="admissionletter" type="file" class="form-control" required>
</div>
</div>
PS：这是Angular，而不是AngularJS