在Angular 4中发布数据时出现网络错误

Question

我正在学习Angular 4.我尝试发布一个文件和一个关键字。上传时我在网页控制台中收到以下错误。

代码：19 columnNumber：0 data：null 文件名：＆＃34; http://localhost:4200/polyfills.js＆＃34; lineNumber：5291 消息：＆＃34;发生网络错误。＆＃34; 名称：＆＃34; NetworkError＆＃34; 结果：2152923155

这就是我尝试上传文件的方式。

.service文件中的方法

  url: String = 'localhost:8080/file-uploader/rest/file/';

      getFileName(fileToUpload: File, columnHeading: any) {
        const httpOptions = {
          headers: new HttpHeaders({
            'Content-Type': 'multipart/form-data',
          })
        };
        const body = {
          file: fileToUpload,
          columnHeading: columnHeading
        };
        return this.http.post<UploadResponse['path']>(this.url + 'upload', body, httpOptions);
      }

界面文件

interface UploadResponse {
  path: string;
}

文件上传打字稿文件

  uploadFile() {
    this.httpService.getFileName(this.file, this.columnHeading).subscribe(
      res => {
        localStorage.setItem('filePath', res);
      }
    );
  }

文件上传html标记文件

<div>
  <input type="file" [(ngModel)]="file" name="file">
  <br>
  <input type="text" [(ngModel)]="columnHeading" name="columnHeading">
  <br>

  <!-- (click) passes input value to add() and then clears the input -->
  <button (click)="uploadFile()">
    Upload File
  </button>
</div>