将文件（图像）从 Angular 8 发送到 Spring Boot App答案

【问题标题】：Send a File (an image) from Angular 8 to Spring Boot App将文件（图像）从 Angular 8 发送到 Spring Boot App
【发布时间】：2020-04-22 06:44:41
【问题描述】：

我想将一个文件从我的 Angular 8 应用程序发送到我的 Spring Boot 服务器

我在 Spring 中尝试过 - MultiPartFile 、HttpServletRequest 和其他一些方法，但没有成功。

我希望有人能告诉我如何在春季获取文件...以及是否需要对我的 Angular 应用程序进行一些更改。

角度 8

<input ngModel type="file" name="file" (change)="fileChange($event)" class="form-control-file" id="exampleInputFile" aria-describedby="fileHelp" required>

fileChange(event) {
    this.imageMentor = event.target.files[0];
  }

当我发送文件时 - 在组件中

onFormSubmitMentor() {

    const dataImage = new FormData();
    dataImage.append('myFile', this.imageMentor, this.imageMentor.name);
    this.useDetailsService.addMentor(dataImage).subscribe(data => {
      }, Error => {
        if (Error.error.error === 'Unauthorized') {
          alert('Unauthorized');
        }
      });
  }

服务

addMentor(dataImage) {
    const token = JSON.parse(localStorage.getItem('currentUser'));
    let headers = new HttpHeaders();
    headers = headers.append('Authorization', 'Bearer ' + token.token);
    headers = headers.append('Content-type', 'application/json');
    console.log(dataImage);
    return this.http
      .post(
        'http://localhost:8080/register/mentor',{file: dataImage}, {headers, responseType: 'text'}
      ).pipe(map((response: any) => {
        console.log(response);
        return response;
      }), catchError((err: any) => {
        console.log(err);
        return throwError(err);
      }));
  }

春季启动

@RequestMapping(value = "/register/mentor", method = RequestMethod.POST,consumes = "application/json")
    @ResponseBody
    public ResponseEntity<?> registerMentor(HttpServletRequest request) throws Exception {
//        connectionValidation.isAdmin();
        StringBuilder builder = new StringBuilder();
        try (BufferedReader in = request.getReader()) {
            char[] buf = new char[4096];
            for (int len; (len = in.read(buf)) > 0; )
                builder.append(buf, 0, len);
        }
        String requestBody = builder.toString();
        return saveMentorUser(new Mentor());
//        return saveMentorUser(mentor);
    }

我试过了

https://medium.com/@udith.indrakantha/upload-images-and-save-them-in-a-database-angular-8-spring-boot-mysql-b5144768202b

【问题讨论】：

标签： angular spring-boot

【解决方案1】：

我查看了 Heroku CLI，发现这不是 cors 问题，但是，我在 spring 中的一个函数抛出了一个连接到 Mongo 的错误，但我猜 heroku 不理解它并回应了 cors 问题。

【讨论】：

【解决方案2】：

标题内容被设置为 JSON，这可能必须设置为 form-data 作为您传递的表单数据

    headers = headers.append('Content-type', 'multipart/form-data');

【讨论】：