在Angular 2和Spring MVC中上载具有其他表单字段的文件
问题内容:
我正在尝试 将文件和其他表单字段内容 从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>
模型
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){}
那么,如何info
在弹簧控制器中获取标记的数据呢?上面我已经展示了我的错误尝试,那么获取其他表单字段数据的正确方法是什么?
应该如何定义带批注的Controller方法,或者还有其他方法可以从Angular 2发送数据(文件+表单字段)?
问题答案:
您需要使用@RequestPart
而不是@RequestParam
和set consumes
属性:
@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, file.name);
formData.append('info', new Blob([JSON.stringify(this.model)],
{
type: "application/json"
}));