如何使用Angular 4将上传的excel文件发送到C#Post API

使用AngularJS它可以工作，但对于angular 4，当我使用相同的方法时它不工作。我在上载excel文件时遇到磁盘错误。请帮助我。

下面是一个示例，我使用它通过FormData将文件上载到API

getUploadHeaders() {
    let headers = new Headers({'Accept': 'application/json'});
    headers.delete('Content-Type');
    return headers;
}    

addNewPost(newPost: FormData): Observable<FormData> {
    const endpoint = 'https://yourApiUrl.com'; 
    return this.http
        .post(endpoint, newPost, { headers: this.getUploadHeaders() })
        .catch((e) => this.handleError(e));
}

在您的服务文件中，如

upload.service.ts

中，您需要创建通过POST方法上载文件的函数。以下是此函数的示例：

var fd = new FormData();
fd.append('file', data.target.files[0]);
return this.http.post(url), fd).map().catch();

要通过FormData上载文件，需要3个参数：API端点上的propertyName、文件和该文件的名称。 在您的

upload.component.html

中，您需要有如下表单：

fileToUpload: File = null;

constructor(private uploadService: UploadService) { }

handleFileInput(files: FileList) {
  this.fileToUpload = files.item(0);
}


saveFileToApi() {
  const saveForm: FormData = new FormData();      
  if (this.fileToUpload) {
    saveForm.append('fileFieldNameOnYourApi', this.fileToUpload, this.fileToUpload.name);
  }

  this.uploadService.addNewPost(saveForm).subscribe(() => {
    console.log('Upload success!');
  }, error => {
    console.log('Upload failed!');
  });
}

选择要上载的文件
斯皮切恩

有关FormData读取的更多详细信息以及有关FormData.append（）读取的更多信息。

public importMassUpdateExcel（文件：FormData，id）：可观察{
const headers=新的头({
“授权”：“”，//授权令牌
'内容类型'：'应用程序/json；字符集=UTF-8'//
});
const options=新请求选项({
标题：标题
});
返回此文件。http
.post（url、文件、选项）
.map（）
.catch（）；
}

谢谢格雷戈·多罗斯琴科。您的回答有助于理解，但如果尝试此方法，我会发现请求的资源上存在“访问控制允许来源”标题。这个错误和磁盘错误，所以我通过重新创建授权和内容类型来实现。

<form (ngSubmit)="onSubmit()">     
    <label for="fileField">Chose file to upload</label>
    <input type="file"
           id="fileField"
           name="fileField"
           (change)="handleFileInput($event.target.files)">
    <button type="submit">Speichern</button>
</form>