使用Angular2将文件上传到REST API [英] File Upload with Angular2 to REST API

问题描述

实际上，我正在使用带有Angular 2编码的接口的Spring REST API.

Actually, I'm working on a Spring REST API with an interface coded in Angular 2.

我的问题是我无法使用Angular 2上传文件.

My problem is I can't upload a file with Angular 2.

我在Java中的Webresources是:

My Webresources in java is that :

@RequestMapping(method = RequestMethod.POST, value = "/upload")
public String handleFileUpload(@RequestParam MultipartFile file) {
    //Dosomething 
}

当我通过带有Auth标头等的URL请求调用它时，它是完美的工作方式... (带有适用于Chrome的Advanced Rest Client扩展)

And it is perfectly working when I call it through URL request with Auth header etc ... ( with Advanced Rest Client extension for Chrome )

证明:(在这种情况下，一切正常)

Proof: (everything works fine in that case )

我添加了

<bean id="multipartResolver"
      class="org.springframework.web.multipart.commons.CommonsMultipartResolver" />

Spring配置文件和Pom依赖项

Spring config file and the Pom dependency

<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.2</version>
</dependency>

但是，当我尝试使用Webform进行相同的操作时:

BUT when I try to do the same thing with a webform :

<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

My web service returns me an error 500, with that in tomcat logs: http://pastebin.com/PGdcFUQb

我也尝试了'Content-Type': undefined方法，但没有成功(在这种情况下，Web服务向我返回了415错误.

I tried the 'Content-Type': undefined method too but without success ( the web service return me a 415 error in that case.

有人可以帮助我找出问题所在吗?

Can someone help me to figure out what's the problem is?

问题已解决，我将在稍后用我的代码更新该问题:)，但请看一下它的工作原理是否很好. 谢谢.

Problem solved, I'll update that question later with my code :) but, have a look on the plunker it's working perfectly well. Thanks.

推荐答案

在最终版本中，这实际上很容易做到.花了我一些时间来解决这个问题，因为我遇到的有关它的大多数信息都已过时.如果其他人为此感到困扰，请在此处发布我的解决方案.

This is actually really easy to do in the final release. Took me a while to wrap my head around it because most information about it that I've come across is outdated. Posting my solution here in case anyone else is struggling with this.

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>

这实际上就是它的全部.

That is really all there is to it.

或者，捕获事件对象并从srcElement获取文件.老实说，不确定是否有任何一种方法比另一种更好！

Alternatively, capture the event object and get the files from the srcElement. Not sure if any way is better than the other, to be honest!

请记住，FormData是IE10 +，因此，如果必须支持IE9，则需要使用polyfill.

Keep in mind FormData is IE10+, so if you have to support IE9 you'll need a polyfill.

更新2017年1月7日

更新的代码可以处理多个文件的上载.同样，我最初的答案缺少与FormData有关的相当关键的一点(因为我将实际的上载逻辑移到了我在自己的应用程序中处理的单独服务中).

Updated code to be able to handle uploading of multiple files. Also my original answer was missing a rather crucial bit concerning FormData (since I moved the actual upload logic to a separate service in my own app I was handling it there).

这篇关于使用Angular2将文件上传到REST API的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！