如何使用Angular 6在被动表单中选择文件和上载文件

这里我们需要添加测试用例，为此我们需要上传一个文件，使用输入类型file，使用angular 6，以反应形式。 当上传文件并作为响应发送到API时，我们在标题中得到响应

test_template: "C:\fakepath\Copy of Task_angular_issue and change_logs.xlsx"

但我们得到的回应是

{
“状态”：“错误”，
“消息”：“缺少以下参数：测试脚本、测试模板”，
“结果”：[]
}

我知道怎么上传文件吗

html文件

模板上传
拯救
取消

ts文件

从'@angular/core'导入{Component，OnInit，ElementRef，ViewChild}；
从“@angular/forms”导入{FormControl，FormGroupDirective，FormGroup，NgForm，Validators，FormBuilder}；
从“@angular/material/core”导入{ErrorStateMatcher}；
从“@angular/Router”导入{ActivatedRoute，Router}”；
从“../../../services/AutomationCaseServiceProvider”导入{AutomationCaseServiceProvider}”；
从“../../../services/auth service”导入{AuthServiceProvider}”；
从“@angular/material”导入{matsnakbar}；
从“../../../tables/filter table/filter table.component”导入{FilterTableComponent}；
导出类MyErrorStateMatcher实现ErrorStateMatcher{
isErrorState（控件：FormControl | null，形式：FormGroupDirective | NgForm | null）：布尔值{
const issubmitt=form&&form.submitted；
return！！（control&&control.invalid&&control.dirty | | | control.touch | | isSubmitted））；
}
}
@组成部分({
选择器：“应用程序添加自动化”，
templateUrl:“./add automation.component.html”，
styleUrls:['./add automation.component.scss']，
提供者：[AutomationCaseServiceProvider，AuthServiceProvider]
})
导出类AddAutomationComponent实现OnInit{
帐户：{test_模板：string}={
测试模板：“”
};
userForm:FormGroup；
构造函数（私有formBuilder:formBuilder，
专用路由器：路由器，
公共authService:AuthServiceProvider，
公共automationCaseService:AutomationCaseServiceProvider，
公共小吃店（Matsnakbar）{
}
恩戈尼尼特（）{
**在这里初始化表单**
这个.buildForm（）；
}
buildForm（）：void{
this.userForm=this.formBuilder.group({
“测试模板”：[''，验证器。必需]
})
console.log（this.userForm）；
};
addAutomationCase（）{
如果（！this.userForm.valid）{
返回；
}
否则{
this.automationCaseService.addautomationCase（this.userForm.value）.subscribe(
（resp）=>{
让UserData=JSON.stringify（resp）；
让data=JSON.parse（UserData）；
console.log（data.Message）；
如果（data.Status==“错误”）{
this.snackBar.open（data.Message，'Close'{
持续时间：2000年
});
}
else if（data.Status==“成功”）{
this.snackBar.open（data.Message，'Close'{
持续时间：2000年
});
this.router.navigate（['/auth/admin/Manage_Automation']）；
}
});
}
}
onSelectFile（事件）{
//log（JSON.stringify（event.target））；
//if（event.target&&event.target[0]）{
//var reader=new FileReader（）；
//reader.readAsDataURL（event.target[0]）；
////读取文件作为数据url
//警报（event.target.files[0]）；
// }
let fileList:fileList=event.target.files；
如果（fileList.length>0）{
var reader=new FileReader（）；
reader.readAsDataURL（event.target.files[0]）；
console.log（event.target.files[0].name）；
}
this.test_template=event.target.files[0].name；
//需要运行CD，因为文件加载在区域外运行
//this.cd.markForCheck（）
}
onSelectscript（事件）{
if（event.target.files&&event.target.files[0]）{
var reader=new FileReader（）；
reader.readAsDataURL（event.target.files[0]）；//将文件作为数据url读取
}
}
matcher=新的MyErrorStateMatcher（）；
}

通过从@rxweb/reactive form validators导入RxFormBuilder，您可以上传一个角度反应式格式的文件，创建其对象并使用toFormData（）方法将json数据转换为formData，这里我在服务器端传递了一个api链接供您参考，它将把fileObject传递给服务器。在html中添加[writeFile]=“true”时，不需要调用onSelectFile（$event）

组件1.ts：

export class AddAutomationComponent implements OnInit {
   api:string = 'api/User'

  account: { test_template: string } = {
    test_template: ''
  };

  userForm: RxFormGroup;

  constructor(private formBuilder: RxFormBuilder,private http: HttpClient ) {

  }

  ngOnInit() {
    this.buildForm();
  }


  buildForm(): void {
    this.userForm = <RxFormGroup>this.formBuilder.group({
        'test_template': ['', Validators.required]
      })
     let formdata = this.userForm.toFormData()
       this.http.post(this.api, formdata); // This is fake uri, This is just for your reference.
  };
}

导出类AddAutomationComponent在NIT上实现{
api:string='api/用户'
帐户：{test_模板：string}={
测试模板：“”
};
userForm:RxFormGroup；
构造函数（私有formBuilder:RxFormBuilder，私有http:HttpClient）{
}
恩戈尼尼特（）{
这个.buildForm（）；
}
buildForm（）：void{
this.userForm=this.formBuilder.group({
“测试模板”：[''，验证器。必需]
})
让formdata=this.userForm.toFormData（）
this.http.post（this.api，formdata）；//这是假的uri，仅供参考。
};
}

在component.html中：

<div class="dashboard">
  <form class="example-form" [formGroup]="userForm" (ngSubmit)="addAutomationCase(this.login_type)">
    <div class="example-full-width" style="display: inline-block">
      <label>Template Upload</label>
      <input type="file" formControlName="test_template" accept=".xlsx,.xls" [writeFile]="true">
    </div>

    <div class="dashboardFooter">
      <button type="submit" class="button btn-primary" color="primary"> Save </button>
      <button type="reset" class="button btn-default" color="default"> Cancel </button>
    </div>
  </form>

</div>

模板上传
拯救
取消

---

您的APi告诉您

以下参数丢失：test\u脚本，test\u模板

，因此可能需要添加它们？我已经在发送对标题{“test\u template”的响应：“C:\\fakepath\\Copy of Task\u angular\u issue and change\u logs.xlsx”}显然不是！首先，在您的代码中缺少

test\u脚本

。其次，表单中有一个

test\u模板

值，但编辑组件对象，然后通过服务发送表单值。您的代码充满了不一致性，没有一个用户将无法帮助您。