如何以角度 2 发布带有有效负载的表单？

Question

我正在玩 angular 2，尝试创建一个上传文件的示例应用程序。 有下面的视图和组件，当我点击提交时，我没有看到任何请求来自浏览器。

如果我添加 (ngSubmit)="onSubmit()" 到表单，我可以看到 onSubmit 被调用，但我没有看到任何东西传入它。

问题：获得正确绑定以便我可以拥有有效的文件上传表单的正确方法是什么？

模板：

<form action="api/upload" method="POST" enctype="multipart/form-data" class="btn-group" role="group">
    <input type="file" class="btn btn-lg btn-default" required>
    <input type="submit" value="Upload" class="btn btn-lg btn-primary upload-btn">
</form>

---

组件：

import {Component} from 'angular2/core';
import {FORM_DIRECTIVES}    from 'angular2/common';

@Component({
    selector: 'my-app',
    directives: [FORM_DIRECTIVES],
    template: 'path-to-template'
})

export class AppComponent {
    onSubmit(e) {
        // TODO: get payload from form and upload to server
        console.log(e);
    }
}

Answer 1

在我的项目中，我使用 XMLHttpRequest 发送 multipart/form-data。 我认为它适合你。

html代码

<input type="file" (change)="selectFile($event)">

ts 代码

selectFile($event): void {
  var inputValue = $event.target;
  this.file = inputValue.files[0];
  console.debug("Input File name: " + this.file.name + " type:" + this.file.size + " size:" + this.file.size);
}

上传代码：

const URL = 'http://www.example.com/rest/upload/avatar'; 

uploader:MultipartUploader = new MultipartUploader({url: URL});

item:MultipartItem = new MultipartItem(this.uploader);

if (this.item == null){
   this.item = new MultipartItem(this.uploader);
}
if (this.item.formData == null)
  this.item.formData = new FormData();

this.item.formData.append("file",  this.file);

this.item.callback = this.uploadCallback;
this.item.upload();

这里是示例：https://github.com/wangzilong/angular2-multipartForm