无法在 Angular 中发送多部分文件

Question

当尝试从 Angular 向 Spring 引导服务器发送文件时，该文件不会作为 Multipart 文件发送。两天前我遇到了类似的问题，使用相同的代码，但在尝试找到问题并返回当前代码后，一切又开始工作了。如您所见，时间不长。当我通过邮递员发送文件时，一切正常。我尝试添加其他标头，例如 Content-Type 或 Accept，但没有任何效果。有人遇到过这个问题吗？

这里是 Angular 代码：

addProduct.html

          <div class="col-auto">
            <div class="form-group">
              <label for="imageFile" style="width: 100%">Add Photo</label>
              <input type="file" id="imageFile" (change)="onFileChanged($event)">
            </div>
          </div>

          <div class="col-md-12">
            <div class="form-group">
                <button class="btn btn-primary" (click)="addProduct()">Add product</button>
            </div>
          </div>

addProduct.ts

public onFileChanged(event) {
      this.selectedFile = event.target.files[0];
      console.log(this.selectedFile);
  }

  addProduct(){
    const formData  = new FormData();
    formData.append('image', this.selectedFile, this.selectedFile.type);
    this.productService.uploadImage(formData).subscribe(
      response => {
              if (response.status === 200) {
                this.handleResponseImage(response);
                this.productService.addProduct(this.product).subscribe(res => {
                  console.log(res);
                });
              } else {
                console.log('error');
              }
        }
      );
  }

service.ts

  uploadImage(imageData: FormData){
    const api = API_URL + 'products/imageUpload';
    return this.http.post(api, imageData, {observe: 'response'});
  }

Spring 启动控制器：

    @PostMapping(value = "/imageUpload", consumes = "application/json")
    public ResponseEntity<Map<String,String>> uploadImage(@RequestParam("image") MultipartFile file) throws IOException {
        return new ResponseEntity<>(productService.uploadImage(file), HttpStatus.OK);

    }

错误：

org.springframework.web.multipart.MultipartException: Current request is not a multipart request
    at org.springframework.web.method.annotation.RequestParamMethodArgumentResolver.handleMissingValue(RequestParamMethodArgumentResolver.java:196) ~[spring-web-5.2.5.RELEASE.jar:5.2.5.RELEASE]
    at org.springframework.web.method.annotation.AbstractNamedValueMethodArgumentResolver.resolveArgument(AbstractNamedValueMethodArgumentResolver.java:114) ~[spring-web-5.2.5.RELEASE.jar:5.2.5.RELEASE]
    at org.springframework.web.method.support.HandlerMethodArgumentResolverComposite.resolveArgument(HandlerMethodArgumentResolverComposite.java:121) ~[spring-web-5.2.5.RELEASE.jar:5.2.5.RELEASE]
    at org.springframework.web.method.support.InvocableHandlerMethod.getMethodArgumentValues(InvocableHandlerMethod.java:167) ~[spring-web-5.2.5.RELEASE.jar:5.2.5.RELEASE]
    at org.springframework.web.method.support.InvocableHandlerMethod.invokeForRequest(InvocableHandlerMethod.java:134) ~[spring-web-5.2.5.RELEASE.jar:5.2.5.RELEASE]
    at org.springframework.web.servlet.mvc.method.annotation.ServletInvocableHandlerMethod.invokeAndHandle(ServletInvocableHandlerMethod.java:105) ~[spring-webmvc-5.2.5.RELEASE.jar:5.2.5.RELEASE]
    at org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter.invokeHandlerMethod(RequestMappingHandlerAdapter.java:879) ~[spring-webmvc-5.2.5.RELEASE.jar:5.2.5.RELEASE]
    at org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter.handleInternal(RequestMappingHandlerAdapter.java:793) ~[spring-webmvc-5.2.5.RELEASE.jar:5.2.5.RELEASE]
    at org.springframework.web.servlet.mvc.method.AbstractHandlerMethodAdapter.handle(AbstractHandlerMethodAdapter.java:87) ~[spring-webmvc-5.2.5.RELEASE.jar:5.2.5.RELEASE]
    at org.springframework.web.servlet.DispatcherServlet.doDispatch(DispatcherServlet.java:1040) ~[spring-webmvc-5.2.5.RELEASE.jar:5.2.5.RELEASE]
    at org.springframework.web.servlet.DispatcherServlet.doService(DispatcherServlet.java:943) ~[spring-webmvc-5.2.5.RELEASE.jar:5.2.5.RELEASE]
    at org.springframework.web.servlet.FrameworkServlet.processRequest(FrameworkServlet.java:1006) ~[spring-webmvc-5.2.5.RELEASE.jar:5.2.5.RELEASE]
    at org.springframework.web.servlet.FrameworkServlet.doPost(FrameworkServlet.java:909) ~[spring-webmvc-5.2.5.RELEASE.jar:5.2.5.RELEASE]
    at javax.servlet.http.HttpServlet.service(HttpServlet.java:660) ~[tomcat-embed-core-9.0.33.jar:9.0.33]
    at org.springframework.web.servlet.FrameworkServlet.service(FrameworkServlet.java:883) ~[spring-webmvc-5.2.5.RELEASE.jar:5.2.5.RELEASE]
    at javax.servlet.http.HttpServlet.service(HttpServlet.java:741) ~[tomcat-embed-core-9.0.33.jar:9.0.33]
    at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:231) ~[tomcat-embed-core-9.0.33.jar:9.0.33]
    at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166) ~[tomcat-embed-core-9.0.33.jar:9.0.33]
    at org.apache.tomcat.websocket.server.WsFilter.doFilter(WsFilter.java:53) ~[tomcat-embed-websocket-9.0.33.jar:9.0.33]

请求负载：

------WebKitFormBoundary5IOZSk3ytW7tYOZ5
Content-Disposition: form-data; name="image"; filename="image/png"
Content-Type: image/png


------WebKitFormBoundary5IOZSk3ytW7tYOZ5--

Answer 1

我猜这是因为您使用的是@RequestParam("image") 而不是@RequestPart。并使用"application/json"而不是"multipart/form-data"。不确定是不是问题，但只有这种方式对我有用

控制器示例：

@PostMapping(value = "/imageUpload", consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
public ResponseEntity<Map<String,String>> uploadImage(@RequestPart MultipartFile image) throws IOException {
   return new ResponseEntity<>(productService.uploadImage(image), HttpStatus.OK);
}