如何使用Angular 2+，Express和nodeJs上傳文件

Question

我試圖用Mulular庫使用Angular 4，node和Express上傳圖像。

這裏是我的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 
    }) 
}); 

如果我使用郵差它的工作和圖像添加到我的項目中上傳目錄。

這裏是我的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> 

時我使用郵遞員它的作品，所以我想這個問題與角碼有關。 也我認爲它必須與標題或正文請求。 以下是錯誤我從節點服務器獲得：

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

t o：

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

現在它工作！

Answer 2

我用下面的代碼：

fileChange(event) { 
    const fileList: FileList = event.target.files; 
    if (fileList.length > 0) { 
     const file: File = fileList[0]; 
     const formData: FormData = new FormData(); 
     formData.append('file', file, file.name); 
     const headers = new Headers(); 
     headers.append('Content-Type', 'multipart/form-data'); 
     headers.append('Accept', 'application/json'); 
     const body = JSON.stringify({ headers: headers }); 
     this.http.post('https://bla.com', formData, body) 
      .map(res => res.json()) 
      .catch(error => Observable.throw(error)) 
      .subscribe(data => { 
      const Response = data['_status']; 
      if (Response) { 
       this.uploadFile.push(data); 
      } else { 
       this.showFileError = data['_error']; 
      } 
      } 
     ); 
    } 
    } 

的HTML模板：

<input class="file-hide" type="file" (change)="fileChange($event)">