使用 Angular 2（前端）和 Spring Boot（后端）上传 Excel

Question

您好，我是 angular2 的新手，我正在尝试从 angular2 上传 excel 前端。我到底想要实现的是，从 angular2 上传 excel 前端将它传递给后端的 Springboot，我将在 springboot 内部制作 必要的更改。最后将其传递回 angular 以在屏幕上呈现它。

My Approach :
let user select the excel from frontend 
POST it to springboot backend , make necessary modification using apache POI 
Finally pass it to angular again to render it on screen .


Problem Area :-


I have made the frontend part to recieve input 


below is my code :-

     <input type="file" id="myfile" class="form-control" [(ngModel)]="fileObj" (change)="upload($event)" accept=".xlsx">


Angular Component method to called on change of element :-

    file: File
    upload(event : EventTarget){

    let eventObj : MSInputMethodContext = <MSInputMethodContext> event ;
    let target : HTMLInputElement = <HTMLInputELement>  eventObj.target ;
    let files : FileList = target.files ;
    this.file = files[0];
    this._appService.sendFile(this.file);

    }

above functions calls the sendFile method in appservice of angular2

below is the code for appService :-


    private headers = new Headers({'Content-Type' : 'multipart/form-data'});

    sendFile(fileObj : File){
    return this.http.post('http://localhost:9000/submitexcel', fileObj, {headers : this.headers}).map(res => res.json().data).subscribe();

    }

Springboot 控制器接收传入的文件。

@RestController
public class ExcelUploadController {

@RequestMapping(method = RequestMethod.POST , value="/submitexcel")
public ResponseEntity<String> getFile(@RequestParam("File") MultipartFile file){
System.out.println("inside controller");
}
}

每当我调用控制器时，我都会在控制台上收到错误消息：-

"请求被拒绝，因为没有找到多部分边界"

下面是我的问题：-

1. 是不是我没有正确地将excel文件发送到springboot？？如果不是，请告诉我正确的方法

2.我的方法是否正确以实现所需的目标？

3.如何将 excel 从 springboot 发送回 angular 以显示在前端？？

我尝试了很多关于这个的谷歌搜索，但找不到任何有用的东西

请帮帮我，我卡了好几天了，谢谢

Answer 1

试试这个，appService

sendFile(fileObj : File){
    let headers = new Headers();
    let options = new RequestOptions({ headers: headers }); 

    let formData = new FormData();
    formData.append('file', fileObj);

    return this.http.post('http://localhost:9000/submitexcel', formData, options).map(res => res.json().data).subscribe();
}

弹簧控制器

@RestController
public class ExcelUploadController {

   @RequestMapping(method = RequestMethod.POST , value="/submitexcel")
   public ResponseEntity<String> getFile(@RequestParam MultipartFile file){
      System.out.println(file.getOriginalFilename());
   }
}

Answer 2

问题很可能是您明确指定了Content-Type，尝试{'Content-Type' : undefined}，这将使浏览器确定正确的Content-Type

我认为这种方法没有任何问题。至于您的客户将如何接收修改后的 excel，那么您要么必须用 excel 响应提交 excel 的同一请求，要么您必须让您的服务器在另一个回调中提供 excel 文件。