这是一个有用的教程，如何使用ng2-file-upload和不使用ng2-file-upload上传文件。

对我来说很有帮助。

目前，教程包含几个错误:

1-客户端应具有与服务器相同的上传url 在app.component.ts中更改行

const URL = 'http://localhost:8000/api/upload';

to

const URL = 'http://localhost:3000';

2-服务器发送响应为'text/html'，所以在app.component.ts更改

.post(URL, formData).map((res:Response) => res.json()).subscribe(
  //map the success function and alert the response
  (success) => {
    alert(success._body);
  },
  (error) => alert(error))

来

.post(URL, formData)  
.subscribe((success) => alert('success'), (error) => alert(error));

jspdf和Angular 8

我生成了一个pdf，并希望通过POST请求上传pdf，这就是我所做的(为了清晰起见，我删除了一些代码和服务层)

import * as jsPDF from 'jspdf';
import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient)

upload() {
    const pdf = new jsPDF()
    const blob = pdf.output('blob')
    const formData = new FormData()
    formData.append('file', blob)
    this.http.post('http://your-hostname/api/upload', formData).subscribe()
}

今天我在我的angular 6应用中集成了ng2文件上传包，它非常简单，请找到下面的高级代码。

导入ng2-file-upload模块

app.module.ts

    import { FileUploadModule } from 'ng2-file-upload';

    ------
    ------
    imports:      [ FileUploadModule ],
    ------
    ------

组件的文件导入FileUploader

app.component.ts

    import { FileUploader, FileLikeObject } from 'ng2-file-upload';
    ------
    ------
    const URL = 'http://localhost:3000/fileupload/';
    ------
    ------

     public uploader: FileUploader = new FileUploader({
        url: URL,
        disableMultipart : false,
        autoUpload: true,
        method: 'post',
        itemAlias: 'attachment'

        });

      public onFileSelected(event: EventEmitter<File[]>) {
        const file: File = event[0];
        console.log(file);

      }
    ------
    ------

组件HTML添加文件标签

app.component.html

 <input type="file" #fileInput ng2FileSelect [uploader]="uploader" (onFileSelected)="onFileSelected($event)" />

Working Online stackblitz链接:https://ng2-file-upload-example.stackblitz.io

Stackblitz代码示例:https://stackblitz.com/edit/ng2-file-upload-example

官方文档链接https://valor-software.com/ng2-file-upload/

感谢@Eswar。这段代码非常适合我。我想在解决方案中添加一些东西:

我得到错误:java.io.IOException: RESTEASY007550:无法获得多部分的边界

为了解决这个错误，你应该删除“Content-Type”“multipart/form-data”。它解决了我的问题。

我已经成功地使用了下面的工具。我和primeNg没有利害关系，只是传递我的建议。

http://www.primefaces.org/primeng/#/fileupload

Angular 2对上传文件提供了很好的支持。不需要第三方库。

<input type="file" (change)="fileChange($event)" placeholder="Upload file" accept=".pdf,.doc,.docx">

fileChange(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();
        /** In Angular 5, including the header Content-Type can invalidate your request */
        headers.append('Content-Type', 'multipart/form-data');
        headers.append('Accept', 'application/json');
        let options = new RequestOptions({ headers: headers });
        this.http.post(`${this.apiEndPoint}`, formData, options)
            .map(res => res.json())
            .catch(error => Observable.throw(error))
            .subscribe(
                data => console.log('success'),
                error => console.log(error)
            )
    }
}

使用@angular/core": "~2.0.0"和@angular/http: "~2.0.0"