带有多部分文件和其他参数的 Angular POST 请求答案

【问题标题】：Angular POST request with multipart file and other params带有多部分文件和其他参数的 Angular POST 请求
【发布时间】：2020-06-23 07:42:14
【问题描述】：

我想从 Angular 发出 POST 请求，而后端开发人员正在等待这样的 Spring Boot 请求，带有 3 个参数：

@PostMapping(value = "/import", consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
    public ResponseEntity<?> importFile(
            @RequestParam(value = "type") Dto dto,
            @RequestParam(value = "booleanValue", required = false) Boolean booleanValue,
            @RequestParam("file") MultipartFile file)
            throws IOException {

在 Angular 方面，我正在尝试构建表单数据，但在编写此代码时无法添加布尔值：

importFile(fileToImport: FileToImport, booleanValue?: boolean) {
    const formData = new FormData();
    formData.append('type', fileToImport.type);
    formData.append('booleanValue', booleanValue);
    formData.append('file', fileToImport.file);
    return this.http.post('/import', formData);
  }

force 出现错误：Argument of type 'boolean' is not assignable to parameter of type 'string | Blob'

那么我怎样才能设置 3 个参数来尊重后端呢？

感谢您的帮助

【问题讨论】：

FileToImport 类型是什么？
对不起，我犯了一个错误。这是我的布尔值，我无法添加到我的 formData

标签： angular typescript spring-boot post

【解决方案1】：

您正在尝试将布尔值传递给formData.append 函数。您应该将其转换为字符串。

importFile(fileToImport: FileToImport, booleanValue?: boolean) {
  const formData = new FormData();
  formData.append('type', fileToImport.type);
  formData.append('force', booleanValue.toString());
  formData.append('file', fileToImport.file);
  return this.http.post('/import', formData);
}

如果您的后端特别关注布尔值的解析方式，您可能需要更多处理。请记住，布尔值的 Javascript 字符串表示形式是 "true" 和 "false"。

【讨论】：