Angular 2 - 文件上传 - 如何访问文件？

我正在制作一个简单的文件上传脚本，并且只能找到基于input的(change)事件的工作示例。即 - https://www.thepolyglotdeveloper.com/2016/02/upload-files-to-node-js-using-angular-2/Angular 2 - 文件上传 - 如何访问文件？

<input type="file" id="userfile" class="form-control" 
(change)="fileChangeEvent($event)" name='userfile'>

This works。这很好。

但是，如果我尝试绑定文件输入到ngModel它不起作用。

模板

<form class="form-signin" (ngSubmit)="onSubmit(fileForm.value)" #fileForm="ngForm"> 
<input type="file" id="userfile" class="form-control" 
[(ngModel)]="fileUpload.userfile" name='userfile'> 
<input type="text" id="random" class="form-control" 
[(ngModel)]="fileUpload.random" name="random"> 

<button class="btn btn-lg btn-primary btn-block" type="submit">Upload File</button> 
</form>

component.ts

onSubmit(data){ 
    console.log("Submitted"); 
    console.log(data); 
    }

只有数据在random输入设置会显示出来。没有文件放置在文件输入将显示出来，只有（在我的ngModel和打印出来的数据）（undefined）onSubmit(data)

来源

2017-02-15 Jim Factor

[Angular 2 File input from input type = file]可能重复（http://stackoverflow.com/questions/35399617/angular-2-file-upload-from-input-type-file） – Adam

我也有问题在Angular 2中如何处理文件，所以我选择了低这种技术方法可以支持Angular 2形式。

我的模板看起来像这样。

<input class="field" type="file" (change)="setFile($event)" />

并访问我的文件，我用：

private setFile(event) { 
    this._files = event.srcElement.files; 
}

然后，您可以使用这些文件。

请记住，在Angular 2中上传多部分文件数据也不起作用（上次我选中），因此您可能不得不使用手动XHR请求而不是HTTP提供程序。 See this answer for details about that。

来源

2017-02-15 22:04:33 Adam

Angular 2 - 文件上传 - 如何访问文件？

回答

相关问题