Angular 2 / Express 将文件上传到服务器

Question

我是 Angular2 和 Express 的新手，我很难将文件上传到服务器。我在 JS、PHP 和 HTML 中创建了一个基本的文件上传器，但似乎无法让它与 Angular2 和 Express 一起使用。任何帮助，将不胜感激。我更多的是寻找将文件/图像上传到服务器的答案。 :)。如果我走错了方向，那么构建一个新的简单项目可能会更容易。

目前我正在尝试在 angular-cli 项目中复制它：

https://github.com/coligo-io/file-uploader

问题：
我想我一直无法收到发送以表达的帖子请求，请参阅下面的代码。当我测试这个时，我运行 ng build，然后运行 ​​node server.js。我可以选择一个文件，但是在我选择一个文件后，当它应该被上传到“上传”目录中的服务器时，什么都没有发生。

App.Component.ts

import { Component, ElementRef, ViewChild, Injectable } from '@angular/core';
import { Http } from '@angular/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

@Injectable()
export class AppComponent {
  title = 'app works!';

  @ViewChild('upload-btn') uploadbtn;
  @ViewChild('inputFile') inputFile:ElementRef;
  @ViewChild('progressBar') progressBar;

  constructor(private http: Http, private e1: ElementRef){}

  /* When button is clicked open input */
  upload(){
    console.log("clicked");
    this.inputFile.nativeElement.click();
  } // end of upload

  /* Process input form */
  sendToServer(){
      // Get form input
      let inputFile: HTMLInputElement = this.inputFile.nativeElement;

      let fileCount: number = inputFile.files.length;

      let formData = new FormData();

      console.log("File Count: " + fileCount);

      if( fileCount > 0 ){
        for(let i = 0; i < fileCount; i++){
          console.log("Count: " + i);
          formData.append('uploads[]', inputFile.files.item(i), inputFile.files.item(i).name);
        }
        console.log("Form Data: " + formData);

        this.http.post('http:/localhost:3000/upload', formData);
        console.log("file uploaded");
      }

  } // end of send to server

}

App.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

App.component.html

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <div class="panel panel-default">
        <div class="panel-body">
          <span class="glyphicon glyphicon-cloud-upload"></span>
          <h2>File Uploader</h2>
          <h4>coligo.io</h4>
          <div class="progress">
            <div #progressBar class="progress-bar" role="progressbar"></div>
          </div>
          <button (click)="upload()" class="btn btn-lg upload-btn" type="button">Upload File</button>
        </div>
      </div>
    </div>
  </div>
</div>

<input #inputFile  (change)="sendToServer()" id="upload-input" type="file" name="uploads[]" multiple="multiple"><br/>

Server.js

var express = require('express');
var app = express();
var path = require('path');
var formidable = require('formidable');
var fs = require('fs');

app.use(express.static(path.join(__dirname, 'dist')));

app.get('/', function(req, res){
  res.sendFile(path.join(__dirname, 'dist/index.html'));
});

app.post('/upload', function(req, res){
  console.log("Server Hit");
  // create an incoming form object
  var form = new formidable.IncomingForm();

  // specify that we want to allow the user to upload multiple files in a single request
  form.multiples = true;

  // store all uploads in the /uploads directory
  form.uploadDir = path.join(__dirname, '/uploads');

  // every time a file has been uploaded successfully,
  // rename it to it's orignal name
  form.on('file', function(field, file) {
    fs.rename(file.path, path.join(form.uploadDir, file.name));
  });

  // log any errors that occur
  form.on('error', function(err) {
    console.log('An error has occured: \n' + err);
  });

  // once all the files have been uploaded, send a response to the client
  form.on('end', function() {
    res.end('success');
  });

  // parse the incoming request containing the form data
  form.parse(req);

});

var server = app.listen(3000, function(){
  console.log('Server listening on port 3000');
});

File Structure for attempt 2

感谢您的帮助。我真的很感激。

Answer 1

您需要subscribe 角度请求

例如

this.http.post('http:/localhost:3000/upload', formData)
    .subscribe();