Отправить файл с Angular на Nodejs - Не удается прочитать свойства 'заголовки' из неопределенного

Question

У меня проблемы с передачей данных с файлом в мой nodejs бэкэнд. В настоящее время я использую azure функции для запуска моего nodejs кода. В настоящее время, когда я передаю данные с файлом, я получаю Cannot read property 'headers' of undefined, я добавляю заголовок в параметры, поэтому я не совсем понимаю, почему я получаю ошибку. Работа с файлами, безусловно, одна из моих слабости, поэтому я ценю любую помощь!

import { Injectable, OnDestroy } from "@angular/core";
import { Subject, Observable } from "rxjs";
import {
  HttpClient,
  HttpParams,
  HttpRequest,
  HttpHeaders,
  HttpEvent,
  HttpEventType
} from "@angular/common/http";
import { map, takeUntil, switchMap } from "rxjs/operators";
import { Router } from "@angular/router";
import { environment } from 'src/environments/environment';
import { AuthService } from '../auth.service';
import { SendAppealModel } from './send-appeal.model';

@Injectable({ providedIn: "root" })
export class SubmitAppealService implements OnDestroy {

  destroy = new Subject();

  constructor(private http: HttpClient, private router: Router, private authService: AuthService) { }

  ngOnDestroy() {
    this.destroy.next();
    this.destroy.complete();
  }

  submitAppeal(
    username: string,
    email: string,
    file: File
  ) {


    let form = new FormData();
    form.append('file', file);
    form.append('username', username);
    form.append('email', email);

    console.log("FILE OUTPUT");
    console.log(file);

    let headers = new HttpHeaders();
    headers.append('Content-Type', 'multipart/form-data');
    headers.append('Accept', 'application/json');
    let options = { headers: headers, reportProgress: true };

    const api = environment.azure_function_url + `/PATCH-Send-Appeal`;
    const req = new HttpRequest('PATCH', api, form, options);

    return this.http.request(req)
      .pipe(
        map((res: HttpEvent<any>) => {
          if (res.type === HttpEventType.Response) {
            return res.body.id.toString();
          } else if (res.type === HttpEventType.UploadProgress) {
            // Compute and show the % done:
            const UploadProgress = +Math.round((100 * res.loaded) / res.total);
            return UploadProgress;
          }
        })
      );

  }

}

azure функция

const multer = require('multer');
const upload = multer({ dest: 'public/uploads/' }).single('file');

module.exports = function (context, req) {
  context.log('JavaScript HTTP trigger function processed a request.');
  upload();


  console.log(req.file);
  var filename = path.basename("../" + req.file.path);
  console.log("filename");
  console.log(req.file.destination);
  console.log(__dirname);

  var form = new formidable.IncomingForm();

  console.log("form");
  console.log(form);


  context.res = {
    status: 200,

    headers: {
      'Access-Control-Allow-Credentials': 'true',
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'PATCH, OPTIONS',
      'Access-Control-Allow-Headers': 'Content-Type, Set-Cookie',
      'Access-Control-Max-Age': '86400',
      Vary: 'Accept-Encoding, Origin',
      'Content-Type': 'application/json',
    },
  };


  context.done();
};

Answer 1

Я предполагаю, что вы получаете эту ошибку, потому что ваши headers на самом деле не делают это для вашей azure функции.

В настоящее время у вас есть это:

let headers = new HttpHeaders();
headers.append('Content-Type', 'multipart/form-data');
headers.append('Accept', 'application/json');
let options = { headers: headers, reportProgress: true };

Вы не можете сделать это. headers.append не выполняет обновление на месте. Он возвращает новый HttpHeaders объект. Итак, вам на самом деле нужно это:

let headers = new HttpHeaders();
headers = headers.append('Content-Type', 'multipart/form-data');
headers = headers.append('Accept', 'application/json');
let options = { headers: headers, reportProgress: true };

В комментариях я вижу еще одну вещь, которая мне немного не нравится. Это может быть частью проблемы. Попробуйте обновить ваш HTTP-вызов: * функция в первой строке, чтобы проверить объект запроса и убедиться, что ваш HttpHeaders делает это.