文件未从 Angular 发送到 Nodejs

Question

我正在使用 ngx-awesome-uploader 将我的图像添加到 Angular 以发送到后端。我正在尝试将文件发送到我的 nodejs 后端，但它一直在文件应该位于的后端返回 {}。以前从未处理过文件，但我会进行有根据的猜测并说那里应该有一些东西。

在前端，文件似乎要发送，因为console.log(fileUpload.file);

输出

后端输出

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

但从控制台输出中可以看到，在后端收到时为空。不知道为什么。感谢您的帮助！

文件选择器.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
    }
  });



});

文件预览模型

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

您已经声明了一个表单，但它从未被使用过。请尝试以下操作：

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;
          }
        })
      );


  }

}

Answer 2

您忘记指定内容类型，因此找不到文件。

将此标头添加到您的请求中。

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

在你的 nodejs 应用中导入 multer：

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);
...
}