我想知道如何使用角度和表单构建器上传文件，目前我只找到使用formbuilder的教程，使用单个文件，如File Upload In Angular?
我的问题是.ts文件，你如何将文件追加到formbuilder中的字段？我已经看到它与formData()完成但不能让他们两个一起工作，任何提示非常感谢！
component.ts
ngOnInit() {
this.escolaridad_candidato = this.fb.group({
nivel_estudio: [, [Validators.required]],
escuela: [, [Validators.required]],
graduacion: [, [Validators.required]],
certificado: [, [Validators.required]] <--This is the file I need to append
});
}
onEstudiosChange(event) {
const reader = new FileReader();
if (event.target.files && event.target.files.length) {
const [file] = event.target.files;
reader.readAsDataURL(file);
reader.onload = () => {
this.exp_academica.patchValue({
certificado: reader.result
});
// need to run CD since file load runs outside of zone
this.cd.markForCheck();
};
}
}
// On Submit button
this.myservice.post('myUrl', this.escolaridad_candidato.rawdata(), configOptions )
component.html
<form [formGroup]="escolaridad_candidato" >
<div class="col s6 center-align" >
<p >Estudios</p>
<div class="row">
<div class="col s12">
<p >Degree</p>
<select class="browser-default" formControlName="nivel_estudio">
<option value="" disabled selected>----</option>
<option *ngFor="let nivel of listnivelEstudios" value="{{ nivel.id }}">
{{ nivel.nombre }}
</option>
</select>
</div>
<div class="col s12 center-align input-field">
<p >Escuela </p>
<input id="escuela" type="text" class="validate browser-default" formControlName="escuela"/>
</div>
<div class="col s12 input-field center-align">
<p >Año de graduación </p>
<input id="graduacion" type="text" class="validate browser-default"
formControlName="graduacion" />
</div>
</div>
<div class="row">
<div class="col s12">
<p >Certificate </p>
<div class="file-field input-field">
<div class="btn" >
<span>Adjuntar archivo +</span>
<input type="file" formControlName="certificado" (change)="onEstudiosChange($event)">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text">
</div>
</div>
</div>
</div>
</div>
</form>
我已经为Angular 7和任何小于7但大于2的版本指定了代码。
formDataProductImagePost(endPoint, formData) {
let headers = new Headers();
let formDataFinal = new FormData();
// The below for loop is for multiple file uploads. If you have only one file which needs to be uploaded then you don't need the loop.
for (let j = 0; j < formData.length; j++) {
formDataFinal.append('file', formData[j]);
}
return this.http.post(this.profileApiUrl + endPoint, formDataFinal, {
headers: headers
}).toPromise().then((response: any) => {
let image_id = JSON.parse(response._body)['response'];
// console.log(image_id);
return image_id;
});
}
/// This shall work on Angular 7. Let me know if you face any issues :).
<form [formGroup]="myForm">
<div class="form-group form-inline">
<label class="btn btn-secondary btn-file">Browse
<input name="file" type="file" (change)="onFileChange($event)">
<input type="hidden" name="fileHidden" formControlName="file"/>
<!-- Validation Field -->
</label>
<p *ngIf="file" class="pl-4 align-middle mb-0">{{file.name}}</p>
</div>
<button type="button" class="btn btn-primary" (click)="finalUpload()">Upload</button>
</form>
// Angular Code
public file: string = '';
public fileN = new FormControl();
ngOnInit() {
let self = this;
this.myForm = this.formBuilder.group({
fileN: [fileName, Validators.required]
});
}
finalUpload() {
this.uploadData().subscribe(data => {
console.log(data);
});
}
uploadData():Observable<any> {
let formData = new FormData();
let result = Object.assign({}, this.myForm.value);
for (let o in result) {
formData.append(o, result[o])
}
return this.request.post<any>('http://localhost:8000/api/image', formData);
}
handleError(error: any) {
return error;
// console.log(error);
}
onFileChange($event) {
this.file = $event.target.files[0]; // <--- File Object for future use.
let file = $event.target.files[0]; // <--- File Object for future use.
this.myForm.controls['fileN'].setValue(file ? file.name : ''); // <-- Set Value for Validation
}
奇怪的是，关于如何做到这一点的文档很少。
答案相对简单：
html必须有这样的输入
<input type="file" (change)="onFileChanged($event, i)">
使用fb，您可以使用const myFormValue = this.myForm.value之类的内容提取表单的值
在.ts文件中：
public onFileChanged(event: any) {
if (event.target.files && event.target.files.length) {
const file = event.target.files[0];
this.certEscolar = file;
}
}
submit() {
const myFormValue = this.myForm.value
const myFormData = new FormData();
for ( let i = 0; i < myFormValue.length; i++ ) {
for ( let key of myFormValue) {
myFormData.append(key, myFormValue[key]);
}
}
this.http.post<any>(SOMEURL, myFormData, Config.api.multiContentOptions)
.subscribe(response => {
console.log("response from server!", response)
}
我使用的标题是：
Config.ts
const MultipartHeaders: HttpHeaders = new HttpHeaders({
Authorization: 'Token ' + token,
Accept: 'application/json'
});
let Config = {
api: {
baseURL: 'http://11.98.155.150/back/ws' //obviously fake
options: { headers: jsonheaders },
formatOptions: { headers : formDheaders },
multiContentOptions: { headers : MultipartHeaders },
}
};
使用formArrays和FormData会变得更加棘手，如果有人请求我可以上传一个例子。