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

【问题标题】：Angular 2 - File Upload - How to access file?Angular 2 - 文件上传 - 如何访问文件？
【发布时间】：2017-07-04 19:00:50
【问题描述】：

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

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

这行得通。这很棒。

但是，如果我尝试将文件输入绑定到 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 中显示为（未定义）并从onSubmit(data)打印出数据

【问题讨论】：

Angular 2 File upload from input type=file的可能重复

标签： angular file-upload angular-cli

【解决方案1】：

我对 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.

【讨论】：