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

Posted 2023-04-13

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

【英文标题】：Upload file with JSON data in Angular5 and Spring Boot

【发布时间】：2019-04-09 11:42:57

【问题描述】：

我被困在我的 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()。

【参考方案1】：

你需要订阅 observable。

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

Docs

【讨论】：

我不敢相信我犯了这个错误..感谢您识别它..然后它说，内容类型不能是''，HttpMediaTypeNotSupportedException..你能帮我看看究竟应该是什么内容类型此处为 HTTP 帖子。

application/json 给出 org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'application/json' not supported... 如果我按照这里的建议删除 Content Type ：***.com/questions/36005436/… ，它会给出 org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'application/json' not supported... springframework.web.multipart.support.MissingServletRequestPartException：所需的请求部分“上传文件”不存在..

'Content-Type': 'multipart/form-data' 给出 org.springframework.web.multipart.MultipartException: 无法解析多部分 servlet 请求；嵌套异常是 org.apache.commons.fileupload.FileUploadException：请求被拒绝，因为没有找到多部分边界