在 Angular5 和 Spring Boot 中上传带有 JSON 数据的文件

Question

我被困在我的 REST 控制器上获取请求。 下面是我的控制器方法：

@RestController
@CrossOrigin(origins = "http://localhost:4200", allowedHeaders = "*")
public class UserController {

@Autowired
    public UserService userService;

    @PostMapping(value = "/fileUploadApi",  consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
    public @ResponseBody StatusUpload fileUpload(@RequestPart("uploadfile") MultipartFile file, @RequestPart("user") User userDto) throws Exception{
        StatusUpload status= new StatusUpload();
        status = userService.callUserServiceForFileRead(file, userDto);
        return status;
    }

在 ApplicationConfig.java 中，我添加了以下内容：

@Bean
     public MultipartResolver multipartResolver() {
         CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver();
         multipartResolver.setMaxUploadSize(500000000);
         return multipartResolver;
     }

下面是我为Angular5端的文件上传编写的代码：

HTML：

    <!-- Other form elements -->
    <!-- Used PrimeNG Custom Upload Handler to get the File Object https://www.primefaces.org/primeng/#/fileupload -->
        <label>Upload template </label>
          <p-fileUpload (uploadHandler)="getFile($event)" auto="true" customUpload="true"  accept=".xlsx,application/msexcel"  previewWidth="0" [showUploadButton]="false" [showCancelButton]="false">
          </p-fileUpload>
<!-- Form Submit Button -->
<button type="button" (click)="submit()">SUBMIT</button>

组件：

    user: User = new User;
// Set other form element data in user object.
    uploadFile: File;
    getFile(event) {
        this.uploadfile= event.files[0];
      }
submit() {
    this.userService.saveUserData(this.user,this.uploadFile);

  }

服务：

options = {
    headers: new HttpHeaders({  'Content-Type': ''  })
  };
constructor(private http: HttpClient) { }
    saveUserData(user:User, uploadFile:File){
    var formData: FormData = new FormData();
    formData.append('user',JSON.stringify(user));
    formData.append('uploadfile',uploadFile);
    return this.http.post<StatusUpload>(baseUrl + "/fileUploadApi", formData, this.options);
    }

当我使用上述服务时，它没有给我任何响应/没有异常，不知道为什么。该请求甚至没有到达我的 RESTController。 我在一些帖子中阅读了不同的方法并使用如下：

saveUserData(user: User, uploadFile: File) {
var formData: FormData = new FormData();
Observable.fromPromise(new Promise((resolve, reject) => {
  let xhr = new XMLHttpRequest();
  formData.append('user', new Blob([JSON.stringify(user)],
    {
      type: "application/json"
    }));
  formData.append('uploadfile', uploadFile);
  xhr.open("POST", baseUrl + "/fileUploadApi", true);
  xhr.send(formData);
}));
}

通过上面，我得到了 org.springframework.web.multipart.support.MissingServletRequestPartException。

任何人都可以帮助使此代码正常工作。我需要在我的 Angular 服务中使用 http.post()，而不是 XMLHttpRequest.send()。

Answer 1

你需要订阅 observable。

直到您对该方法返回的可观察对象调用 subscribe() 后，HttpClient 方法才会开始其 HTTP 请求。这适用于所有 HttpClient 方法。

Docs