使用Angular2(Frontend)和Springboot(Backend)的Excel上传

本文介绍了使用Angular2(Frontend)和Springboot(Backend)的Excel上传的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我是angular2的新手，我正在尝试从angular2上传一个excel 前端.我确切要实现的是从angular2上传excel 前端将其传递给后端的Springboot，在springboot里面，我将做进行必要的更改.最后将其传递回角度以在屏幕上呈现.

Hi I am new to angular2 and I am trying to upload an excel from an angular2 frontend .What exactly I want to achieve is , upload the excel from angular2 frontend pass it to Springboot in backend ,inside springboot I will make necessary changes .Finally pass it back to angular to render it on screen .

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 Controller接收传入的文件.

Springboot Controller to recieve the incoming file .

@RestController
public class ExcelUploadController {

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

每当我调用控制器时，在控制台上都会出错:-

whenever I make a call to controller , I get error on console :-

由于未找到多部分边界，因此请求被拒绝"

"the request was rejected because no multipart boundary was found "

现在下面是我的问题问题:-

Now below are my problem questions :-

我没有将excel文件正确发送到springboot吗?否则，请告诉我正确的方法

2.我的方法是否正确才能达到要求?

2.Is my approach correct to achieve what is required ?

3.如何将Excel从springboot发送回angular以便在Frontend上显示?

3.How will I send the excel back from springboot to angular to display on Frontend ??

我对此进行了很多搜索，但是找不到有用的东西

I tried googling a lot about this, but could not find anything useful

请帮助我，由于困扰我很多天，谢谢

Please help me ,I am stuck since many days , thanks

和Springboot

使用Angular2(Frontend)和Springboot(Backend)的Excel上传

问题描述

推荐答案