实际上，我正在开发一个 Spring REST API，其接口是用 Angular 2 编码的。
我的问题是我无法使用 Angular 2 上传文件。
我的java网络资源是：
@RequestMapping(method = RequestMethod.POST, value = "/upload")
public String handleFileUpload(@RequestParam MultipartFile file) {
//Dosomething
}
当我通过带有 Auth 标头等的 URL 请求调用它时，它工作得很好...... （带有适用于 Chrome 的高级 Rest 客户端扩展）
证明：（在这种情况下一切正常）
I added the
<bean id="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver" />
Spring配置文件和Pom依赖
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.2</version>
</dependency>
但是当我尝试用网络表单做同样的事情时：
<input type="file" #files (change)="change(files)"/>
<pre>{{fileContents$|async}}</pre>
使用（更改）方法：
change(file) {
let formData = new FormData();
formData.append("file", file);
console.log(formData);
let headers = new Headers({
'Authorization': 'Bearer ' + this.token,
'Content-Type': 'multipart/form-data'
});
this.http.post(this.url, formData, {headers}).map(res => res.json()).subscribe((data) => console.log(data));
/*
Observable.fromPromise(fetch(this.url,
{method: 'post', body: formData},
{headers: this.headers}
)).subscribe(()=>console.log('done'));
*/
}
我的 Web 服务返回错误 500，在 tomcat 日志中显示：http://pastebin.com/PGdcFUQb
我尝试过'Content-Type': undefined方法也是如此，但没有成功（在这种情况下，Web 服务向我返回 415 错误。
有人可以帮我找出问题所在吗？
问题解决了，我稍后会用我的代码更新这个问题:)但是，看看这个 plunker，它工作得很好。 谢谢。
这实际上在最终版本中很容易做到。我花了一段时间才弄清楚它，因为我遇到的大多数有关它的信息都已经过时了。在这里发布我的解决方案，以防其他人遇到这个问题。
import { Component, ElementRef, Input, ViewChild } from '@angular/core';
import { Http } from '@angular/http';
@Component({
selector: 'file-upload',
template: '<input type="file" [multiple]="multiple" #fileInput>'
})
export class FileUploadComponent {
@Input() multiple: boolean = false;
@ViewChild('fileInput') inputEl: ElementRef;
constructor(private http: Http) {}
upload() {
let inputEl: HTMLInputElement = this.inputEl.nativeElement;
let fileCount: number = inputEl.files.length;
let formData = new FormData();
if (fileCount > 0) { // a file was selected
for (let i = 0; i < fileCount; i++) {
formData.append('file[]', inputEl.files.item(i));
}
this.http
.post('http://your.upload.url', formData)
// do whatever you do...
// subscribe to observable to listen for response
}
}
}
然后像这样使用它：
<file-upload #fu (change)="fu.upload()" [multiple]="true"></file-upload>
这就是它的全部内容。
或者，捕获事件对象并从 srcElement 获取文件。老实说，不确定是否有一种方法比另一种更好！
请记住，FormData 适用于 IE10+，因此如果您必须支持 IE9，则需要一个 polyfill。
更新2017-01-07
更新了代码以能够处理多个文件的上传。另外，我最初的答案缺少有关 FormData 的相当重要的一点（因为我将实际的上传逻辑移至我自己的应用程序中的单独服务中，我在那里处理它）。