大佬教程收集整理的这篇文章主要介绍了使用Angular 2和Spring MVC中的其他表单字段上传文件,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
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>@H_439_5@model.ts
export class Model{ name: String; email: String; }
现在在后端:
ExampleModel.java
public class ExampleModel { private String name; private String email; //Getters and Setters@H_439_5@mainController.java
@requestMapping(value = "/file",method = requestMethod.POST) @ResponseBody public ResponseEntity<String> addUser(@requestParam("uploadFile") multipartfile file,@requestParam("info") ExampleModel model){}
@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" }));
以上是大佬教程为你收集整理的使用Angular 2和Spring MVC中的其他表单字段上传文件全部内容,希望文章能够帮你解决使用Angular 2和Spring MVC中的其他表单字段上传文件所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。