Javascript 使用angular 4上传文件

我正在尝试使用angular 4上传一个文件，但是它似乎不起作用，尽管我在tuitorial上非常关注。如果有人能帮我发现我做错了什么，我会非常感激的。 下面是我的代码：

从'@angular/core'导入{Component，OnInit}；
从'src/app/connectionmanager/connectionmanager.component'导入{ConnectionManagerComponent}；
从“@angular/core”导入{ViewChild}；
从'@angular/forms'导入{FormGroup}；
从'@angular/forms'导入{FormBuilder}；
从'@angular/Router'导入{Router}；
从'@angular/forms'导入{Validators}；
@组成部分({
选择器：“应用程序新联系人列表.组件”，
templateUrl:'./new contact list.component.html'，
样式URL:['./新联系人列表.component.css']
})
导出类NewContactListComponent实现OnInit{
@ViewChild（ConnectionManagerComponent）connectionManager:ConnectionManagerComponent；
表格：表格组；
selectedFile：文件；
onFileChanged（事件）{
this.selectedFile=event.target.files[0]
}
构造函数（私有fb:FormBuilder，公共路由器：路由器）{
this.form=this.fb.group({
名称：[''，验证器。必需]，
文件名：[''，验证程序。必需]，
});
}
恩戈尼尼特（）{
}
addContactList（）
{
const val=this.form.value；
让contactListName=val.name；
const fd=new FormData（）；
fd.追加（“姓名”，contactListName）；
fd.append（'file'，this.selectedFile，this.selectedFile.name）；
控制台日志（fd）；
this.connectionManager.post（'/contactGroups'，res=>{
控制台日志（res）；
this.router.navigateByUrl（'/newContactList'）；
}，fd）；
}
}

选择文件

那里只进行文件选择。执行在onFileChanged（）函数处停止。请为onFileChanged（）函数尝试下面的代码段。如果它不起作用。请提及参考资料

onFileChanged(event) {
this.selectedFile = event.target.files[0];
addContactList();
}

---

只有文件选择在那里发生。执行在onFileChanged（）函数处停止。请为onFileChanged（）函数尝试下面的代码段。如果它不起作用。请提及参考资料

onFileChanged(event) {
this.selectedFile = event.target.files[0];
addContactList();
}

---

文件进程以角度上传：

app.component.html

<input #fileUpload type="file" id="fileUpload" style="" (change)="detectFiles($event)" (click)="fileUpload.value = null">

fileUpload.service.ts

import { Inject, Injectable } from '@angular/core';
import { HttpClient, HttpParams, HttpHeaders, HttpRequest } from '@angular/common/http';
import { map } from 'rxjs/operators';

@Injectable()
export class FileUploadService {
  constructor(private http: HttpClient) {

  }

  uploadFile(uploadPath, fileToUpload: File) {
    const _formData = new FormData();
    _formData.append('file', fileToUpload, fileToUpload.name);
    _formData.append('uploadPath', uploadPath);

    const url = `api/v1/uploadFile`;

    const request = new HttpRequest('POST', url, _formData, {reportProgress: true });
    return this.http.request(request);
  }

}

---

请参阅：

文件过程上传：角度：

app.component.html

<input #fileUpload type="file" id="fileUpload" style="" (change)="detectFiles($event)" (click)="fileUpload.value = null">

fileUpload.service.ts

import { Inject, Injectable } from '@angular/core';
import { HttpClient, HttpParams, HttpHeaders, HttpRequest } from '@angular/common/http';
import { map } from 'rxjs/operators';

@Injectable()
export class FileUploadService {
  constructor(private http: HttpClient) {

  }

  uploadFile(uploadPath, fileToUpload: File) {
    const _formData = new FormData();
    _formData.append('file', fileToUpload, fileToUpload.name);
    _formData.append('uploadPath', uploadPath);

    const url = `api/v1/uploadFile`;

    const request = new HttpRequest('POST', url, _formData, {reportProgress: true });
    return this.http.request(request);
  }

}

---

请参阅：

您发布的逻辑仅用于文件选择。请张贴文件上传逻辑以及。此外，请参考教程中的“添加联系人列表”，您发布的逻辑仅用于文件选择。请张贴文件上传逻辑以及。另外，请提及本教程的参考添加联系人列表