Question

我正在创建一个简单的文件上传脚本，并且只能找到基于input (change)事件的工作示例。即 - 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)打印出数据

Answer 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

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

1 个答案: