发送JSON和单个请求的图像.Angular Spring引导

Question

春季休息控制器

@PostMapping(
    value = "/post",
    produces = MediaType.APPLICATION_JSON_VALUE,
    consumes = {MediaType.APPLICATION_JSON_VALUE, MediaType.MULTIPART_FORM_DATA_VALUE}
)
public ResponseEntity<User> handleFileUpload(@RequestParam("user") User user, @RequestPart("file") MultipartFile file) {
    // do something with User and file
    return ResponseEntity.ok().build();
}

Angular Service

@Injectable()
export class UploadFileService {
  constructor(private http: HttpClient) { }
  pushFileToStorage(file: File): Observable<HttpEvent<{}>> {
    let formdata: FormData = new FormData();
    formdata.append('file', file);
    formdata.append('user', JSON.stringify(new User('John', 12)))
    const req = new HttpRequest('POST', '/post', formdata, {
      reportProgress: true,
    });
    return this.http.request(req);
  }
}

当我尝试发送请求时，我得到 500 Internal Server Error.

这是请求标题

POST /post HTTP/1.1
Host: localhost:4200
Connection: keep-alive
Content-Length: 152881
Accept: application/json, text/plain, */*
Content-Type: multipart/form-data; boundary=----WebKitFormBoundarydaQb5yaWw2xu1V9r
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9

请求有效载荷

------WebKitFormBoundarydaQb5yaWw2xu1V9r
Content-Disposition: form-data; name="file"; filename="Screen Shot 2017-10-24 at 8.49.13 PM.png"
Content-Type: image/png

------WebKitFormBoundarydaQb5yaWw2xu1V9r
Content-Disposition: form-data; name="user"
{"name":"John","age":12}
------WebKitFormBoundarydaQb5yaWw2xu1V9r--

注意：如果在弹簧休息控制器中，我将参数类型用户更改为字符串。

问题：如何从Angular发送请求，以便在春季我可以获取用户和多Artartfile，而不是字符串。

Answer 1

更改

public ResponseEntity<User> handleFileUpload(@RequestParam("user") User user, @RequestPart("file") MultipartFile file)

to

public ResponseEntity<User> handleFileUpload(@RequestPart("user") User user, @RequestPart("file") MultipartFile file)

并将请求更改为这样的事情将有效：

curl -i -X POST -H "Content-Type: multipart/form-data" 
-F 'user={"name":"John","age":12};type=application/json' 
-F "file=@myfile.txt" http://localhost:8080/post

对于consumes仅需要MediaType.MULTIPART_FORM_DATA_VALUE。

要在Angular中提出上述请求，可以做到这样的事情：

const userBlob = new Blob(JSON.stringify(new User('John', 12)),{ type: "application/json"});
formdata.append('user', userBlob);