Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了使用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>
@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){}

那么,如何在弹簧控制器中获得标记数据的信息呢?上面我已经展示了我的错误尝试,获取其他表单字段数据的正确方法是什么?

应该如何定义带注释的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"
        }));

大佬总结

以上是大佬教程为你收集整理的使用Angular 2和Spring MVC中的其他表单字段上传文件全部内容,希望文章能够帮你解决使用Angular 2和Spring MVC中的其他表单字段上传文件所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。