Angular 2 多部分 AJAX 上传答案

【问题标题】：Angular 2 Multipart AJAX UploadAngular 2 多部分 AJAX 上传
【发布时间】：2016-11-29 12:50:41
【问题描述】：

我正在使用带有 Spring MVC 的 Angular 2。我目前有一个 Upload 组件，它对 Spring 后端进行 AJAX 调用，并从 .csv 文件返回解析数据的响应。

export class UploadComponent {

uploadFile: function(){

var resp = this;

var data = $('input[type="file"]')[0].files[0];
this.fileupl = data;
var fd = new FormData();
fd.append("file", data);
$.ajax({
url: "uploadFile",
type: "POST",
data: fd,
processData: false,
contentType: false,
success: function(response) {
resp.response = response;
},
error: function(jqXHR, textStatus, errorMessage) {
console.log(errorMessage);
}
});
};
}

这行得通，我得到了有效的回复；但是，是否有更角度的 2 方式将此文件传递给 Spring 并接收响应？我一直在研究创建可注入服务并使用订阅，但我一直在努力获得回复

【问题讨论】：

查看此答案以获取有关如何上传文件stackoverflow.com/questions/32423348/…的示例

标签： ajax spring-mvc post typescript angular

【解决方案1】：

我最终做了以下事情：

import { Component, Injectable } from '@angular/core';
import { Observable} from 'rxjs/Rx';
const URL = 'myuploadURL';

@Component({
  selector: 'upload',  
  templateUrl: 'upload.component.html',
  styleUrls: ['upload.component.css']
})

export class UploadComponent {

filetoUpload: Array<File>;
response: {};

constructor() {
  this.filetoUpload = [];
}

upload() {
        this.makeFileRequest(URL, [], this.filetoUpload).then((result) => {           
            this.response = result;            
        }, (error) => {
            console.error(error);
        });
    }
fileChangeEvent(fileInput: any){
        this.filetoUpload = <Array<File>> fileInput.target.files;
    }

    makeFileRequest(url: string, params: Array<string>, files: Array<File>) {
        return new Promise((resolve, reject) => {
            let formData: any = new FormData();
            let xhr = new XMLHttpRequest();
            for(let i =0; i < files.length; i++) {
                formData.append("file", files[i], files[i].name);                
            }            

            xhr.onreadystatechange = () => {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        resolve(JSON.parse(xhr.response));                        
                    } else {
                        reject(xhr.response);
                    }
                }
            };
            xhr.open("POST", url, true);
            xhr.send(formData);
        });
    }

}

然后我可以将响应注入到我的 html 中，例如：

<div class="input-group">
                <input type="file" id="file" name="file" placeholder="select file" (change)="fileChangeEvent($event)">

                <input type="submit" value="upload" (click)="upload()" class="btn btn-primary">
        </div>


    <div *ngIf="response">

    <div class="alert alert-success" role="alert">
    <strong>{{response.myResponseObjectProperty | number}}</strong> returned successfully!
    </div>

这支持多个文件上传。我在这个 plunkr 中将它创建为可注入服务： https://plnkr.co/edit/wkydlC0dhDXxDuzyiDO3

【讨论】：