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访问它们。
试试这个小的lib：
在说明中提供示例。 testingangular4.2.4
替代库：
