Angular 2 - 将文件发布到 Web API答案

【问题标题】：Angular 2 - Post File to Web APIAngular 2 - 将文件发布到 Web API
【发布时间】：2016-02-02 00:12:02
【问题描述】：

我正在尝试将文件从 Angular 2 应用程序传递到 Web API，但实际的文件数据并未发送。

这是我的 Angular 2 服务代码：

        var headers = new Headers();
        headers.append('Content-Type', 'multipart/form-data');

        var formData = new FormData();
        formData.append("file", file);

        return this.http.post('http://myapiurl.com/files/upload', formData, { headers: headers }).map(res => res.json());

在angular 2 docs中，POST方法签名如下：

post(url: string, body: string, options?: RequestOptionsArgs) : Observable<Response>

没有传递表单数据或其他对象的选项。只是正文请求中的一个字符串。当前的解决方法是使用 javascript 和常规 xhr 请求。这样做有明显的缺点，比如无法使用可观察对象等。

对此的任何帮助将不胜感激。

【问题讨论】：

你的意思是你必须通过API请求调用发送一些数据/对象？

标签： asp.net-web-api2 angular

【解决方案1】：

事实上，这还不被支持。请参阅此进行中的问题：https://github.com/angular/angular/issues/5517。

HTTP 支持的当前实现仅支持请求负载的文本内容。查看这两个文件

希望对你有帮助蒂埃里

【讨论】：

那很不幸。看起来这是一个应该被放入测试版的关键功能。感谢您的链接，现在我可以跟踪它了。
是的，同意你的意见！

【解决方案2】：

在 Angular 2 的最终版本中，http.post(...) 的body 参数为any 而不是string，文档here。所以你可以做的就是简单地传递formData 对象，就像你在问题中所做的那样。

【讨论】：

【解决方案3】：

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

和uploader 代码

let xhr = new XMLHttpRequest();
xhr.open('POST', 'http://www.example.com/rest/api', true);
xhr.withCredentials = true;
xhr.send(formData);

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("email",  this.email);
this.item.formData.append("password",  this.password);
this.item.formData.append("file",  this.file);

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

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

【讨论】：