使用Angular 2和Spring MVC中的其他表单字段上传文件
发布时间:2020-12-17 17:02:48 所属栏目:安全 来源:网络整理
导读:我正在尝试将文件和其他表单字段内容从我的Angular 2前端上传到 Spring后端.但不知怎的,我无法做到.这是我的代码: app.component.ts fileChange(e){ this.fileList = e.target.files; }uploadPdf(){ if(this.fileList.length0){ let file: File = this.file
我正在尝试将文件和其他表单字段内容从我的Angular 2前端上传到
Spring后端.但不知怎的,我无法做到.这是我的代码:
app.component.ts fileChange(e){ this.fileList = e.target.files; } uploadPdf(){ if(this.fileList.length>0){ let file: File = this.fileList[0]; let formData:FormData = new FormData(); formData.append('uploadFile',file,file.name); formData.append('info',this.model); console.log(file.size); let headers = new Headers(); headers.append('Accept','application/json'); let options = new RequestOptions({ headers: headers }); this.http.post(this.url,formData,options) /*.map((res: Response) => res.json())*/ .catch(error => Observable.throw(error)) .subscribe( data =>{ this.data = data; console.log(this.data); },error => console.log(error) ) } } app.cmoponent.html <h1 class="text-center"> PDF Viewer and Uploader Example </h1> <div class="text-center"> <form enctype="multipart/form-data"> <div class="form-group"> <label for="name">Name: </label> <input type="text" id="name" class="form-control" name="name" [(ngModel)]="model.name"> </div> <div class="form-group"> <label for="email">Email: </label> <input type="email" id="email" class="form-control" name="email" [(ngModel)]="model.email"> </div> <div class="form-group"> <label for="pdfInput">Select File: </label> <input type="file" id="pdfInput" class="form-control" name="pdfInput" (change)="fileChange($event)"> </div> <div class="form-group"> <button type="button" class="btn btn-success" (click)="uploadPdf()">Upload File!</button><span> </span> <button type="button" class="btn btn-success" (click)="printData()">Print to Console!</button> </div> </form> </div> model.ts export class Model{ name: string; email: string; } 现在在后端: ExampleModel.java public class ExampleModel { private String name; private String email; //Getters and Setters MainController.java @RequestMapping(value = "/file",method = RequestMethod.POST) @ResponseBody public ResponseEntity<String> addUser(@RequestParam("uploadFile") MultipartFile file,@RequestParam("info") ExampleModel model){} 那么,如何在弹簧控制器中获得标记数据的信息呢?上面我已经展示了我的错误尝试,获取其他表单字段数据的正确方法是什么? 应该如何定义带注释的Controller方法,还是有其他方式从Angular 2发送数据(两个文件格式字段)? 解决方法
您需要使用@RequestPart而不是@RequestParam并设置consumemes属性:
@RequestMapping(value = "/file",method = RequestMethod.POST,consumes = "multipart/form-data") @ResponseBody public ResponseEntity<String> addUser(@RequestPart("uploadFile") MultipartFile file,@RequestPart("info") ExampleModel model){} 您还需要调整FormData对象: formData.append('uploadFile',file.name); formData.append('info',new Blob([JSON.stringify(this.model)],{ type: "application/json" })); (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |