node.js - 如何使用 Angular 2+、Express 和 nodeJs 上传文件

Question

我正在尝试使用 Angular 4、node 和 Express 和 Multer 库上传图像。

这是我的 route.js :

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

const upload = multer({ storage: storage }).single('avatar');


router.post('/upload_avatar', function(req, res) {
upload(req, res, function(err) {
    if (err) {
        // An error occurred when uploading
        throw err;
    }
    res.json({
        sucess: true,
        message: 'Image was uploaded successfully'
    });
    // Everything went fine
  })
});

如果我使用 Postman，它确实可以工作并将图像添加到我项目的上传目录中。

这是我的 UserService.js

import { Injectable } from '@angular/core';
import {Http, Headers, RequestOptions} from '@angular/http';
import 'rxjs/add/operator/map';
@Injectable()
export class UserService {
  user: any;
  filesToUpload: Array<File> = [];

  constructor(private http: Http) { }

  uploadAvatar(event){
   let fileList: FileList = event.target.files;
   if(fileList.length > 0) {
    let file: File = fileList[0];
    let formData:FormData = new FormData();
    formData.append('uploadFile', file, file.name);
    let headers = new Headers();
    /** No need to include Content-Type in Angular 4 */
    // headers.append('Content-Type', 'multipart/form-data');
    // headers.append('Accept', 'application/json');

     this.http.post('http://localhost:3000/api/upload_avatar', formData, 
     {headers: headers})
        .map(res => res.json())
        .catch(function(err){
          throw err;
        })
        .subscribe(
            data => console.log('success'),
            error => console.log(error)
        )
  }
}

我的 profile.component.ts 使用这个函数:

 fileChangeEvent(event) {
 this.userService.uploadAvatar(event); 
}

最后我的 HTML 看起来像这样:

<div class="col-md-4">
            <img [src]="userImg" class="img-thumbnail" alt="">
            <input type="file" (change)="fileChangeEvent($event)" 
placeholder="Upload file..." />
            <!-- <button type="button" (click)="upload()">Upload</button> --
>
        </div>

当我使用 postman 时它可以工作，所以我想问题与 Angular 代码有关。
我也认为它必须与标题或正文请求有关。
这是我从 Node 服务器得到的错误:

      C:\Users\admin\Desktop\project\contactlist\routes\route.js:33
        throw err;
        ^
       Error: Unexpected field
       at makeError 

 node_modules\multer\lib\make-
  error.js:12:13)
  at wrappedFileFilter 
 node_modules\multer\index.js:40:19)
  at Busboy.<anonymous> \node_modules\multer\lib\make-middleware.js:114:7)
  at emitMany (events.js:127:13)
 at Busboy.emit (events.js:201:7)
  at Busboy.emit node_modules\busboy\lib\main.js:38:33)
at PartStream.<anonymous> ( 
node_modules\busboy\lib\types\multipart.js:213:13)
at emitOne (events.js:96:13)
at PartStream.emit (events.js:188:7)
at HeaderParser.<anonymous> (node_modules\dicer\lib\Dicer.js:51:16)
at emitOne (events.js:96:13)
at HeaderParser.emit (events.js:188:7)
at HeaderParser._finish (node_modules\dicer\lib\HeaderParser.js:68:8)
at SBMH.<anonymous> (node_modules\dicer\lib\HeaderParser.js:40:12)
at emitMany (events.js:127:13)
at SBMH.emit (events.js:201:7)

Answer 1

刚刚改变了这一行:

formData.append('uploadFile', file, file.name);

到:

formData.append('avatar', file, file.name);

现在它起作用了!