Angular4文件上传问题(在服务器端使用multer )

Question

目前，我正在从事一个项目，需要一个上传和文件到后端的功能。但是在完成前端和后端逻辑之后。前端文件无法传输到服务器端。我已经调试了一个多小时，但找不到发生了什么：

我使用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总是空的。我不确定发生了什么，这里需要帮助。

谢谢

Answer 1

试着给你的文件输入一个name属性。

 <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的文档