javascript - 如何在角度 4 的单个 api 请求中上传文件和表单数据

Question

admin.component.ts

admin.component.html

这是我用于上传表单和数据的代码片段。我可以将表单数据发布到 api 但不是文件。

admin.component.ts

private onFileChange(event: any) {
// let reader = new FileReader();
console.log("in file change method");
if (event.target.files && event.target.files.length > 0) {
  this.file = event.target.files[0];
  console.log(event.target.files);

   }

}

private onSubmit(userform: any) {
    let _formData= new FormData();
    console.log(userform.value);
    userform.value.IdpMetadataFile = this.file;
    console.log(userform.IdpMetadataFile)
    console.log('formData', userform.value);
    this._adminServices.saveAdminConfig(userform.value).subscribe(response => {
  console.log(response);
  this.saveAdmin = true;
});
console.log("save admin " + this.saveAdmin);

}

....admin.component.html...

<div class="form-group">
        <p>Browse IDP Metadata file</p>
        <input type="file" name="IdpMetadataFile " id="IdpMetadataFile " (change)="onFileChange($event)" [(ngModel)]="ViewAdminConfigData.IdpMetadataFile "
            #idpMetaFileName="ngModel">
        <br>

标签： javascriptangulartypescriptangular4-forms

Answer 1

您必须将文件附加到 formdata 对象

onSubmit(){
   let _formData = new FormData();
   _formData.append('file', this.file);
   // call api to send the data
}