Angular4文件上传问题（在服务器端使用multer）答案

【问题标题】：Angular4 file upload Issue (using multer on server side)Angular4文件上传问题（在服务器端使用multer）
【发布时间】：2018-08-14 21:41:56
【问题描述】：

目前，我正在开发一个需要上传功能并将文件发送到后端的项目。但是在完成了前端和后端逻辑之后。前端文件无法传输到服务器端。调试了一个多小时还是查不出来是怎么回事：

我使用Angular4作为前端，使用node、multer作为后端服务

客户端代码：

HTML：

<form [formGroup]="form" (ngSubmit)="SubmitForm(form, $event)" enctype="multipart/form-data">
  <input type="file" (change)="onFileChange($event)">
  <input type="submit">
</form>

打字稿：

constructor(private fb: FormBuilder,
            private http: HttpClient,
            private store$: Store<fromRoot.State>) {
  }
  
  
 onFileChange(event) {
    let fileList: FileList = event.target.files;
    if (fileList.length <= 0) {
      return;
    }
    let file: File = fileList[0];
    let formData: FormData = new FormData();
    formData.append('system-status', file, fileList[0].name);

    this.formData = formData.get('system-status');
  }
  
 SubmitForm({value, valid}, event) {
    this.store$.dispatch(new actions.uploadSystemStatus(this.formData));
  }

Redux 操作：

import {Action} from '@ngrx/store';


export const UPLOAD_SYSTEM_STATUS = '[UPLOAD] Upload System Status';
export const UPLOAD_SYSTEM_STATUS_SUCCESS = '[UPLOAD] Upload System Status Success';
export const UPLOAD_SYSTEM_STATUS_FAILURE = '[UPLOAD] Upload System Status Failure';


export class uploadSystemStatus implements Action {
  type = UPLOAD_SYSTEM_STATUS;
  constructor(public payload: any) {

  }
}

export class uploadSystemStatusSuccess implements Action {
  type = UPLOAD_SYSTEM_STATUS_SUCCESS;
  constructor(public payload: any) {

  }
}

export class uploadSystemStatusFailure implements Action {
  type = UPLOAD_SYSTEM_STATUS_FAILURE;
  constructor(public payload: any){}
}


export type Actions = uploadSystemStatus |
  uploadSystemStatusSuccess |
  uploadSystemStatusFailure;

Redux 效果：

constructor(private actions$: Actions) {}

@Effect()
  uploadFile: Observable<Action> = this.actions$
    .ofType(actions.UPLOAD_SYSTEM_STATUS)
    .switchMap((file) =>
      this.service$.uploadFile((<uploadSystemStatus>file).payload)
        .map(response => new actions.uploadSystemStatusSuccess(response))
        .catch(err => of(new actions.uploadSystemStatusFailure(err))));

服务器端代码

const multer = require('multer');
const express = require('express');
const router = express.Router();


const storage = multer.diskStorage({
    destination: function (req, file, cb) {
      cb(null, '../../server/uploads/system-status');
    },
    filename: function(req, file, cb) {
      cb(null, file.fieldname + '-' + Date.now());
    }
});

const systemStatusUpload = multer({storage: storage}).single('system-status');


router.post('/upload-routes', function(req, res) {
  systemStatusUpload(req, res, function(err){
    if (err) {
      return;
    }
    res.status(200).send({success: true, message: 'Image Uploaded'});
  })
});

module.exports = router;

前端数据可以正常发送，但后端收到后，req.body 始终为空。我不确定发生了什么，需要帮助。

谢谢

【问题讨论】：

没有subscribe()，帖子真的有效吗？

标签： angular express file-upload redux multer

【解决方案1】：

尝试给你的文件输入一个名称属性。

 <input type="file" name="image" (change)="onFileChange($event)">

并在您的路由中的 multer 中间件中使用该名称

 router.post('/upload-routes', upload.single('image'), function (req, res, next) {
     // req.file is the `image` file
     // req.body will hold the text fields, if there were any
 })

multer https://github.com/expressjs/multer的文档

【讨论】：