如何以角度 6 发送多部分请求？答案

【问题标题】：How to send multipart request in angular 6?如何以角度 6 发送多部分请求？
【发布时间】：2023-04-08 02:44:01
【问题描述】：

我需要发送一个多部分请求。

当我提交表单时，我从后端收到以下错误，

解决了 Handler 执行引起的异常：org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'application/octet-stream' not supported

我可以从 Advanced rest 客户端访问，但遇到 angular 问题。

下面的后端是 REST 端点。

@PostMapping("/createCIF")
public Response < Map < String, Object >> createCIF(
@RequestPart("actDocs") List < MultipartFile > actDocs,
 @Valid @RequestPart("createCIFReq") CreateCIFReq createCIFReq,
 HttpServletRequest request) throws URISyntaxException {

}

下面是component.ts文件中的角边代码。

let formData = new FormData();
formData.append('actDocs', this.userInfoService.mulitPartFileArray);
 formData.append('createCIFReq', JSON.stringify(this.userInfo));

   this.userInfoService.createCif(formData)
        .pipe(first())
        .subscribe(
             data => {
   }
 }

Angular 端服务级别代码

createCif(formData): any {
    return this.http.post<any>(this.url + 'createCIF',  
 formData)
    .pipe(map(cif => {
  return cif;
     }));
   }

【问题讨论】：

标签： spring-boot angular6 multipartform-data multipart

【解决方案1】：

我在这个问题上纠结了一整天。

Angular 似乎无法为 JSON 部分设置正确的内容类型。我设法通过创建一个 Blob 来解决这个问题：

let formData = new FormData();
formData.append('actDocs', this.userInfoService.mulitPartFileArray);
formData.append(
    'createCIFReq',
    new Blob([JSON.stringify(this.userInfo)], {type: 'application/json'})
);

希望对你有帮助。

【讨论】：