Загрузка файла с Angular 6 в сторону веб-службы Flask (Python)

Question

Я создал веб-сервис с флягой для сохранения файлов, который строго следует официально фляге пример :

@app.route('/parse_table', methods=['POST'])
def upload_file():
    print(request.files)
    # check if the post request has the file part
    if 'file' not in request.files:
        print('no file in request')
        return""
    file = request.files['file']
    if file.filename == '':
        print('no selected file')
        return""
    if file and allowed_file(file.filename):
        print("hello")
        filename = secure_filename(file.filename)
        file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
        return ""
    print("end")
    return""

Когда я просто использую формы в своем веб-приложении, сервис работает отлично (файл будет храниться на сервере)

<form action = "http://127.0.0.1:5000/parse_table" method = "POST"
      enctype = "multipart/form-data">
  <input type = "file" name = "file" /        
  <input type = "submit"/>
</form>

---

При попытке обработать загрузку через Angular HttpClient, колба не обнаруживает файл в запросе (т. Е. print('no file in request') будет выполнен)

component.html

<input #fileInput name="file" type="file" (change)="handleFileInput($event.target.files)">
<button mat-raised-button class="standard-button" (click)="uploadFile()">Upload file</button>

component.ts

  @ViewChild('fileInput') fileInput;
  uploadFile() {
    const files: FileList = this.fileInput.nativeElement.files;
    if (files.length === 0) {
      return;
    };

    this.backendCommunicationService.parseTable(files).subscribe((data: any) => {
      console.log(data);
    });

Серверные-communication.service.ts

parseTable(files) {
  const httpOptions = {
    headers: new HttpHeaders({
        'Content-Type': 'multipart/form-data',
    })
  };
  const formData: FormData = new FormData();
  formData.append('file', files[0], files[0].name);
  return this.http.post(this.backendAddress + '/parse_table', formData, httpOptions)
}

Есть предложения / советы?

Answer 1

Удаление httpOptions; например, явно установленный заголовок http решает проблему. Сравнение HTTP-запросов к почте от angular webapp и html-формы показало, что в заголовке http Content-Type, несмотря на multipart/form-data', необходима граница, которая не будет установлена ​​angular, если явно указан заголовок http. Удаление этого из сообщения http решает проблему:

parseTable(files) {
  const formData: FormData = new FormData();
  formData.append('file', files[0], files[0].name);
  return this.http.post(this.backendAddress + '/parse_table', formData);
}