Файл не отправляется с Angular на Nodejs

Question

Я использую ngx-awesome-uploader , чтобы добавить свои изображения в angular для отправки в бэкэнд. Я пытаюсь отправить файл на мой nodejs бэкэнд, но он продолжает возвращать {} на бэкэнд, где файл должен быть. Никогда раньше не работал с файлами, но я собираюсь сделать обоснованное предположение и сказать, что там должно быть что-то.

На внешнем интерфейсе похоже, что файл должен быть отправлен, потому что console.log(fileUpload.file);

output

BACKEND OUTPUT

File Upload Section
{ file: {}, fileName: 'image.png' }

Но при получении на стороне сервера он пуст, как вы можете видеть из вывода консоли. Не уверен почему. Я ценю помощь!

file-picker.adapter.ts

import { FilePreviewModel } from 'ngx-awesome-uploader';
import { HttpRequest, HttpClient, HttpEvent, HttpEventType } from '@angular/common/http';
import { map } from 'rxjs/operators';
import { Observable } from 'rxjs';
import { FilePickerAdapter } from 'ngx-awesome-uploader';
import { FilePreviewModelWithAuctionId } from './file-upload.model';
import { environment } from 'src/environments/environment';

export class DemoFilePickerAdapter {
  constructor(private http: HttpClient) {
  }
  public uploadFile(fileItem: FilePreviewModel) {
    const form = new FormData();
    form.append('file', fileItem.file);

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

    const api = environment.api_url + "/fileupload";
    const req = new HttpRequest('POST', api, fileItem, { reportProgress: true });
    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;
          }
        })
      );


  }

}

app. js

app.post("/api/fileupload", checkAuth, (req, res, next) => {

  console.log("File Upload Section")
  console.log(req.body)


  blobService.createContainerIfNotExists('testcontainer', {
    publicAccessLevel: 'blob'
  }, function (error, result, response) {
    if (!error) {
      // if result = true, container was created.
      // if result = false, container already existed.
    }
  });

  blobService.createBlockBlobFromLocalFile('testcontainer', 'taskblob', req.body.file, function (error, result, response) {
    if (!error) {
      // file uploaded
    }
  });



});

FilePreviewModel

export interface FilePreviewModel {
    fileId?: string;
    file: File | Blob;
    fileName: string;
}

FilePreviewModelWithAuctionId

export interface FilePreviewModelWithAuctionId {
  fileId?: string;
  file: File | Blob;
  fileName: string;
  auctionId: string;
}

Answer 1

Вы забыли указать тип содержимого, поэтому не можете найти файл.

Добавьте этот заголовок к вашему запросу.

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.api_url + "/fileupload";
const req = new HttpRequest('POST', api, form , options );

---

Обновление :

Я не видел, что на вашем сервере также отсутствует обработчик для multipart / form-data.

Выполните следующие действия:

npm install --save multer

импорт multer в приложении nodejs:

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

Изменение конечной точки:

app.post("/api/fileupload", checkAuth, upload, (req, res, next) => {
console.log(req.file);
...
}

Answer 2

Вы объявили форму, но она никогда не используется. Попробуйте следующее:

import { FilePreviewModel } from 'ngx-awesome-uploader';
import { HttpRequest, HttpClient, HttpEvent, HttpEventType } from '@angular/common/http';
import { map } from 'rxjs/operators';
import { Observable } from 'rxjs';
import { FilePickerAdapter } from 'ngx-awesome-uploader';
import { FilePreviewModelWithAuctionId } from './file-upload.model';
import { environment } from 'src/environments/environment';

export class DemoFilePickerAdapter {
  constructor(private http: HttpClient) {
  }
  public uploadFile(fileItem: FilePreviewModel) {
    let form = new FormData();
    form.append('file', fileItem.file);

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

    const api = environment.api_url + "/fileupload";
    const req = new HttpRequest('POST', api, form , { reportProgress: true });
    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;
          }
        })
      );


  }

}