Angular 2从inputtypes=file upload文件

使用angular2testing版,我似乎无法获得input的types文件的工作。

使用诊断,我可以看到其他type如文本的双向绑定。

 <form> {{diagnostic}} <div class="form-group"> <label for="fileupload">Upload</label> <input type="file" class="form-control" [(ngModel)]="model.fileupload"> </div> </form> 

在我的打字稿文件中,我有可用的诊断行:

 get diagnostic() { return JSON.stringify(this.model); } 

难道是不是JSON的问题? 该值为null

我无法真正validationinput的价值; 不知何故,即使“select文件…”旁边的文本更新,我不能看到DOM的差异。

我认为这不被支持。 如果你看看这个DefaultValueAccessor指令(见https://github.com/angular/angular/blob/master/modules/angular2/src/common/forms/directives/default_value_accessor.ts#L23 )。 你会看到用于更新绑定元素的值是$event.target.value

这不适用于types为file的input,因为文件对象可以到达$event.srcElement.files

欲了解更多详情,你可以看看这个plunkr: https ://plnkr.co/edit/ozZqbxIorjQW15BrDFrg ? p = info:

 @Component({ selector: 'my-app', template: ` <div> <input type="file" (change)="onChange($event)"/> </div> `, providers: [ UploadService ] }) export class AppComponent { onChange(event) { var files = event.srcElement.files; console.log(files); } } 
 @Component({ selector: 'my-app', template: ` <div> <input name="file" type="file" (change)="onChange($event)"/> </div> `, providers: [ UploadService ] }) export class AppComponent { file: File; onChange(event: EventTarget) { let eventObj: MSInputMethodContext = <MSInputMethodContext> event; let target: HTMLInputElement = <HTMLInputElement> eventObj.target; let files: FileList = target.files; this.file = files[0]; console.log(this.file); } doAnythingWithFile() { } } 

有一个稍好的方法来访问附件。 您可以使用模板引用variables来获取input元素的一个实例。

这是一个基于第一个答案的例子:

 @Component({ selector: 'my-app', template: ` <div> <input type="file" #file (change)="onChange(file.files)"/> </div> `, providers: [ UploadService ] }) export class AppComponent { onChange(files) { console.log(files); } } 

这里是一个示例应用程序来演示这个在行动。

模板引用variables可能是有用的,例如你可以直接在控制器中通过@ViewChild访问它们。