1

我正在玩 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);
    }
}
4

1 回答 1

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

于 2016-02-04T11:44:50.700 回答