Node.js 文件上载与postman一起使用，但与angular2不一起使用 我对角2很陌生，请考虑一下。

我在使用angular 2将文件上载到节点服务器时遇到问题。使用邮递员可以很好地工作：

邮差快照：

import { Component, OnInit } from '@angular/core';
import { UploadService } from './upload.service';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-upload',
  templateUrl: './upload.component.html',
  styleUrls: ['./upload.component.css']
})
export class UploadComponent implements OnInit {

  // file1 = document.getElementById("file1");
  constructor(private uploadService: UploadService) { }

  ngOnInit() {
  }

  onUpload = (file: File) => {
    this.uploadService.uploadfile(file)
      .subscribe((res) => {
        console.log(res);
      },

        (err) => {
          console.log(err);
        });
  }

}

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { HttpClient } from '@angular/common/http';


@Injectable()
export class UploadService {

  constructor(private http: HttpClient) {
  }

  uploadfile(file: File): Observable<File> {

    console.log(file);
    return this.http.post<File>("http://localhost:3000/fileupload", file, { headers: { 'Content-Type': 'application/json' } });
  }

}

但是，当我使用Angular2应用程序向服务器发送文件时，它不会执行任何操作：

角度HTML组件

<label for="file1">Upload PDF version: </label>
<form class="form-inline">
    <div class="form-group">
        <input type="file" id="file1" #abc name="fileToUpload"  class="form-control" placeholder="Upload PDF">
    </div>
    <button class="btn btn-primary" type="submit" (click)="onUpload(abc)">Upload</button>
</form>

服务组件：

import { Component, OnInit } from '@angular/core';
import { UploadService } from './upload.service';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-upload',
  templateUrl: './upload.component.html',
  styleUrls: ['./upload.component.css']
})
export class UploadComponent implements OnInit {

  // file1 = document.getElementById("file1");
  constructor(private uploadService: UploadService) { }

  ngOnInit() {
  }

  onUpload = (file: File) => {
    this.uploadService.uploadfile(file)
      .subscribe((res) => {
        console.log(res);
      },

        (err) => {
          console.log(err);
        });
  }

}

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { HttpClient } from '@angular/common/http';


@Injectable()
export class UploadService {

  constructor(private http: HttpClient) {
  }

  uploadfile(file: File): Observable<File> {

    console.log(file);
    return this.http.post<File>("http://localhost:3000/fileupload", file, { headers: { 'Content-Type': 'application/json' } });
  }

}

从'@angular/core'导入{Injectable}；
从“rxjs/Observable”导入{Observable}；
从'@angular/common/http'导入{HttpClient}；
@可注射（）
导出类上载服务{
构造函数（专用http:HttpClient）{
}
uploadfile（文件：file）：可观察{
console.log（文件）；
返回此.http.post（“http://localhost:3000/fileupload，文件，{标题：{'Content-Type'：'application/json'}}）；
}
}

---

当然，我一定是遗漏了什么。我请求大家提供一些解决方案。

我认为你们的问题是关于标题的

试试这个：

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { HttpClient } from '@angular/common/http';


@Injectable()
export class UploadService {

  constructor(private http: HttpClient) {
  }

  uploadfile(file: File): Observable<File> {

    console.log(file);
    return this.http.post<File>("http://localhost:3000/fileupload", file, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } });
  }

}

从'@angular/core'导入{Injectable}；
从“rxjs/Observable”导入{Observable}；
从'@angular/common/http'导入{HttpClient}；
@可注射（）
导出类上载服务{
构造函数（专用http:HttpClient）{
}
uploadfile（文件：file）：可观察{
console.log（文件）；
返回此.http.post（“http://localhost:3000/fileupload，文件，{标题：{'Content Type'：'application/x-www-form-urlencoded'}}）；
}
}

---

如果你检查你的邮递员截图，是完全相同的标题提供。是上传文件的常用方式

您必须创建formData才能上传文件。下面是示例代码

      fileDetails: any = {
        clientDoc: {}
      }; 
      uploadClientDoc(event) {
        this.fileDetails.clientMandateForm = event.srcElement.files[0];
        this.submitFlag = this.fileDetails.isdaFile ? true : false;
      }

      submit() {
        let formData: FormData = new FormData();
        formData.append('clientDoc', this.fileDetails.clientDoc);
        var data = this.urService.uploadFiles(formData).subscribe(res => {
          //your login  
        });

      }



      uploadFiles(data) {
        const httpOptions = {
          headers: new HttpHeaders({        
            'Accept': 'application/json',
            'Access-Control-Allow-Origin': '*',
            'Content-Type': 'multipart/form-data' 
          })
        };

        return this.http.post('<url>', data, httpOptions);
      }






       <div>
        <label>Please Select Document</label>
        <label class="type-file">+ Upload FIle
          <input type="file" accept="application/pdf" id="my_file1" (change)="uploadClientDoc($event)" />
        </label>   
        <label >{{fileDetails.clientDoc.name}}</label>
      </div>

      <button class="ci-btn float-right-btn" type="button"  (click)="submit()" value="Submit">Submit</button>

fileDetails:any={
clientDoc:{}
}; 
uploadClientDoc（事件）{
this.fileDetails.clientMandateForm=event.srcElement.files[0]；
this.submitFlag=this.fileDetails.isdaFile？true:false；
}
提交（）{
让formData:formData=newformdata（）；
append（'clientDoc'，this.fileDetails.clientDoc）；
var data=this.urseservice.uploadFiles（formData）.subscribe（res=>{
//您的登录
});
}
上载文件（数据）{
常量httpOptions={
标头：新的HttpHeaders（{
“接受”：“应用程序/json”，
“访问控制允许来源”：“*”，
“内容类型”：“多部分/表单数据”
})
};
返回this.http.post（“”，data，httpOptions）；
}
请选择文档
+上传文件
{{fileDetails.clientDoc.name}
提交

谢谢，问题不同了，现在已经解决了。