Excel upload using Angular2(Frontend) and Springbo

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 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 :-

Am I not sending the excel file properly to springboot ??If not please let me know the correct way to do it

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

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

回答1:

Try this, 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();
}

Spring Controller

@RestController
public class ExcelUploadController {

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

回答2:

Most likely the problem is that you're explicitly specifying the Content-Type, try {'Content-Type' : undefined}, this will let the browser determine the proper Content-Type

I don't see anything wrong with the approach. As for how the your client is going to receive the modified excel back then you'll either have to respond with the excel for that same request that submitted the excel or you'll have to let your server serve the excel file on another callback.