Question

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

如果我添加（ngSubmit）=＆＃34; onSubmit（）＆＃34;为了形成，我可以看到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

如何在角度2中发布有效载荷的表单？

1 个答案: