山一程--技术框架--web 技术--UI--angular

目的：记录 angular 点滴

1. localStorage 数据的获取

前后端分离:

Angular ， Http 传文件的话,用 FormData 格式

数据双向绑定 [( ngModel )] = " " 所得到的是字符串"c:/facadePath/xxxFileName.zip , 相当于是文件名。而非 file 类型.

 1 <form name="upload" enctype="multipart/form-data" method="post" novalidate #form="ngForm" (ngSubmit)="submitForm(form)">
 2 
 3   <div class="form-group">
 4     <label>process:</label>
 5     <input name="specifyProcess" class="form-control" [(ngModel)]="upload.specifyProcess" />
 6   </div>
 7 
 8   <div class="form-group">
 9     <label>ground truth:</label>
10     <input type="file" id="groundTruth" name="groundTruth" (change)="selectGroundTruthFile($event)"  required />
11   </div>
12 
13   <div class="form-group">
14     <label>validation:</label>
15     <input type="file" id="validation" name="validation" (change)="selectValidationFile($event)"/>
16   </div>
17 
18   <button type="submit" class="btn btn-primary m-1" [disabled]="form.invalid">
19     submit
20   </button>
21 
22   <button type="reset" class="btn-primary m-1" routerLink="/">
23     cancel
24   </button>
25 
26 </form>

component.ts 中使用 event.files[0] , formData 处理

 1 import {Component} from "@angular/core";
 2 import {UploadModel} from "../module/upload.model";
 3 import {NgForm} from "@angular/forms";
 4 import {HttpClient} from "@angular/common/http";
 5 
 6 @Component({
 7   selector:"upload",
 8   templateUrl:"upload.component.html"
 9 })
10 
11 export class UploadComponent{
12 
13   upload:UploadModel= new UploadModel();
14 
15   constructor(private httpClient: HttpClient){ }
16 
17   submitForm(form:NgForm){
18 
19     if(form.valid){
20 
21       let resData:any;
22       // @ts-ignore
23       const formData:FormData = new FormData();
24 
25       // @ts-ignore
26       formData.append("specifyProcess", this.upload.specifyProcess);
27       formData.append("groundTruth",this.upload.groundTruth);
28       formData.append("validation",this.upload.validation);
29 
30       this.httpClient.post(`http://localhost:2023/legacy/regression/selection/upload`, formData)
31         .subscribe(res=>resData = res);
32     }
33   }
34 
35   selectGroundTruthFile(e:any){
36     this.upload.groundTruth = e.target.files[0];
37   }
38 
39   selectValidationFile(e:any){
40     this.upload.validation = e.target.files[0];
41   }
42 }

upload 对象:

1 export class UploadModel{
2 
3   constructor(public specifyProcess?:string,
4               public groundTruth?: any,
5               public validation?: any){}
6 }