node.js - 文件未从 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

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

将此 header 添加到您的请求中。

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