从Angular 8向NodeJS发送文件的问题

Question

我创建了拖放文件的组件，它的工作正常。我在节点js中使用Multer创建了一项服务，并且对邮递员的工作非常出色。

问题是，当我尝试为服务器的请求创建服务时收到错误。

DragDropDirective：

import { Directive, Output, Input, EventEmitter, HostBinding, HostListener } from '@angular/core';

@Directive({
  selector: '[appDragDrop]'
})
export class DragDropDirective {

  @Output() fileDropped = new EventEmitter<any>();

  @HostBinding('style.background-color') private background = 'transparent';
  @HostBinding('style.opacity') private opacity = '1';

  // Dragover listener
  @HostListener('dragover', ['$event']) onDragOver(evt) {
    evt.preventDefault();
    evt.stopPropagation();
    this.background = 'gray';
    this.opacity = '0.8';
  }

  // Dragleave listener
  @HostListener('dragleave', ['$event']) public onDragLeave(evt) {
    evt.preventDefault();
    evt.stopPropagation();
    this.background = 'transparent';
    this.opacity = '1';
  }

  // Drop listener
  @HostListener('drop', ['$event']) public ondrop(evt) {
    evt.preventDefault();
    evt.stopPropagation();
    this.background = 'transparent';
    this.opacity = '1';
    const files = evt.dataTransfer.files;
    if (files.length > 0) {
      this.fileDropped.emit(files);
    }
  }

}

我的上传器组件：

import { Component, OnInit, Input } from '@angular/core';
import { FileService } from '@globalCore/services/file.service';

enum UploaderType {
  Small = 'small'
}

@Component({
  selector: 'app-uploader',
  templateUrl: './uploader.component.html',
  styleUrls: ['./uploader.component.scss']
})
export class UploaderComponent implements OnInit {
  @Input() type: UploaderType;
  files: any = [];
  constructor(private _filesService: FileService) { }

  ngOnInit() {
  }

  uploadFile(event: any) {
    const formData: FormData = new FormData();
    for (const file of event) {
      formData.append('file', file);
      this.files.push(file.name);
    }
    this._filesService.uploadFiles(515490704, 1, event);
  }

  deleteAttachment(index) {
    this.files.splice(index, 1);
  }

}

上传器html：

<div class="uploader" [class.small]="type === 'small'">
  <div class="uploadfilecontainer" appDragDrop (fileDropped)="uploadFile($event)">
    <input hidden type="file" multiple="multiple" #fileInput (change)="uploadFile($event.target.files)">
    <div class="container">
      <div class="content">
        <div class="row mt-3">
          <div class="col">
            <h4>גרור וזרוק את הקבצים כאן</h4>
          </div>
        </div>
        <div class="row mt-3">
          <div class="col-5">
            <hr />
          </div>
          <div class="col-2 text-center">
            <p>או</p>
          </div>
          <div class="col-5">
            <hr />
          </div>
        </div>
        <div class="row">
          <div class="col text-center">
            <button class="btn btn-primary-white" (click)="fileInput.click()">בחר קובץ</button>
          </div>
          <div class="col text-center">
            <button class="btn btn-borderless">ביטול</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="file-container" *ngFor="let file of files;let i= index">
    <div class="row">
      <div class="col text-right">
        <p>{{file}}</p>
      </div>
      <div class="col">
        <button class="delete-file" (click)="deleteAttachment(i)">
          <!-- <img src="../../assets/Recycle_Bin_Full.png"> -->
          <app-svg-icon *ngIf="!type" name="bin-white_special"></app-svg-icon>
          <app-svg-icon *ngIf="type === 'small'" name="bin-red_special"></app-svg-icon>
        </button>
      </div>
    </div>
  </div>
</div>

fileService：

  uploadFiles(companyID: number, flowID: number, file: any) {
    return this.network.post(this.baseUrl, `${this.FILES}/${this.UPLOAD_FILE}`, { companyID, flowID, file });
  }

我做错了什么？

编辑：带错误的图像似乎文件的有效载荷为空

new Error: new error: Access to XMLHttpRequest at 'http://localhost:5000/api/v1/files/uploadFiles(companyID,%20flowID,%20uploadedFile)%20%7B%20%20%20%20%20%20%20%20//%20const%20headers%20=%20new%20HttpHeaders();%20%20%20%20%20%20%20%20//%20headers.append('Content-Type',%20'multipart/form-data');%20%20%20%20%20%20%20%20//%20headers.append('Accept',%20'application/json');%20%20%20%20%20%20%20%20const%20file%20=%20uploadedFile;%20%20%20%20%20%20%20%20const%20formData%20=%20new%20FormData();%20%20%20%20%20%20%20%20formData.append('file',%20file);%20%20%20%20%20%20%20%20return%20this.network.post(this.baseUrl,%20%60$%7Bthis.FILES%7D/$%7Bthis.uploadFiles%7D%60,%20%7B%20companyID,%20flowID,%20formData%20%7D);%20%20%20%20%7D' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

Answer 1

 if (localStorage.getItem('token') !== null) {
      const token = localStorage.token;
      const xhr: XMLHttpRequest = new XMLHttpRequest();
      xhr.open('POST', 'http://localhost:5000/api/v1/files/upload_file', true);
      xhr.setRequestHeader('Authorization', `Bearer ${token}`);
      const formData = new FormData();
      formData.append('companyID', companyID);
      formData.append('flowID', flowID);
      formData.append('file', event[0]);
      xhr.send(formData);
}

仅使用XMLHttpRequest为我工作。