使用Angular2(Frontend)和Springboot(Backend)的Excel上传 [英] Excel upload using Angular2(Frontend) and Springboot (Backend)

问题描述

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

1. 我没有将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

推荐答案

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

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

我认为该方法没有任何问题.至于您的客户端将如何接收修改后的excel，那么您将不得不对excel提交的同一请求以excel进行响应，或者必须让您的服务器在另一个回调中提供excel文件.

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.

这篇关于使用Angular2(Frontend)和Springboot(Backend)的Excel上传的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！