Angular 获取错误类型错误：无法读取属性'；长度'；错误

我得到一个错误：

错误类型错误：无法读取未定义的属性“length” 评估时（网页）-internal:///./node_modules/@angular/common/esm5/http.js:163） 在Array.forEach（）处 在HttpHeaders.lazyInit（网页包-internal:///./node_modules/@angular/common/esm5/http.js:157） 在HttpHeaders.init（网页包-internal:///./node_modules/@angular/common/esm5/http.js:305） 在HttpHeaders.forEach（网页包-internal:///./node_modules/@angular/common/esm5/http.js:408） 在Observable.eval[作为订阅]（网页-internal:///./node_modules/@angular/common/esm5/http.js:2210） 在可观察的情况下，尝试订阅（网页）-internal:///./node_modules/rxjs/_esm5/Observable.js:177) 在Observable.subscribe（网页包-internal:///./node_modules/rxjs/_esm5/Observable.js:165) 在subscribeToResult（网页包-internal:///./node_modules/rxjs/_esm5/util/subscribeToResult.js:32) 在MergeMapSubscriber.\u innerSub（网页包-internal:///./node_modules/rxjs/_esm5/operators/mergeMap.js:143)

当我试图上传一个文件时会发生这种情况，我不明白为什么，因为我没有在任何地方使用length（）函数

这是我的html：

<app-supervisor-header></app-supervisor-header>
<main>
  <div class="container">
      <div class="col-sm">
        <h3>Wijzigen van examen: {{examen.naam}}</h3>
        <form #examUpdateForm="ngForm" (ngSubmit)="onSubmit(examUpdateForm)">
          <div class="row">
            <div class="col-3">
              <label for="vak">Naam</label>
            </div>
            <div class="col-5">
              <div class="form-group">
                <input class="form-control" type="text" id="vak" placeholder="{{examen.naam}}" />
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-3">
              <label for="vak">Bestand</label>
            </div>
            <div class="col-5">
              <div class="form-group">
                <input type="file" name="examen_bestand" class="form-control-file" id="exampleInputFile" aria-describedby="fileHelp" (change)="fileChanged($event)">
                <small id="fileHelp" class="form-text text-muted">Hier kun je de huidige examenskelet vervangen.</small>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-8">
              <input type="submit" class="pxl-knop float-right" id="zoek-knop" value="Zoek" />
            </div>
          </div>
        </form>
      </div>
  </div>
</main>

在我第二次尝试提交时，它还告诉我错误来自HTML第6行，即：

<form #examUpdateForm="ngForm" (ngSubmit)="onSubmit(examUpdateForm)">

编辑：

ExamService：

@Injectable()
export class ExamService {
  examens: Examen[] = [];

  constructor(private http: HttpClient) {}

  getExams(): Observable<Examen[]> {
    return this.http.get<Examen[]>(APIURL + '/all');
  }

  getExamById(id): Observable<Examen> {
    return this.http.get<Examen>(APIURL + '/asobject/' + id);
  }

  updateExamById(id, exam: Examen) {
    const fd = new FormData();
    const options = {} as any;
    fd.append('file', exam.file);
    fd.append('name', exam.naam);
    return this.http.put<Examen>(APIURL + '/update/' + id, fd, {headers: {'Content-Type': undefined}});
  }
}

{headers: {'Content-Type': undefined}}

@Injectable（）
导出类ExamService{
考试人数：考试人数[]=[]；
构造函数（私有http:HttpClient）{}
getTests（）：可观察{
返回这个.http.get（apirl+'/all'）；
}
getExamById（id）：可观察{
返回此.http.get（apirl+'/asobject/'+id）；
}
updateExamById（id，考试：Examen）{
const fd=new FormData（）；
const options={}如有；
fd.append（'file'，exam.file）；
fd.append（'name'，exam.naam）；
返回这个.http.put（apirl+'/update/'+id，fd，{headers:{'Content-Type'：undefined}）；
}
}

从ExamService中的http.put调用中删除此参数：

@Injectable()
export class ExamService {
  examens: Examen[] = [];

  constructor(private http: HttpClient) {}

  getExams(): Observable<Examen[]> {
    return this.http.get<Examen[]>(APIURL + '/all');
  }

  getExamById(id): Observable<Examen> {
    return this.http.get<Examen>(APIURL + '/asobject/' + id);
  }

  updateExamById(id, exam: Examen) {
    const fd = new FormData();
    const options = {} as any;
    fd.append('file', exam.file);
    fd.append('name', exam.naam);
    return this.http.put<Examen>(APIURL + '/update/' + id, fd, {headers: {'Content-Type': undefined}});
  }
}

{headers: {'Content-Type': undefined}}

您不需要设置内容类型，因为根据我们下面的讨论，angular的HttpClient api将为您正确设置这些内容类型

另外，不要使用FileReader将文件的Blob内容转换为纯文本。相反，只需存储对文件的引用，并在提交时将文件及其名称附加到FormData。例如

// Component
private file: File = null;

fileChanged(e) {
    this.file = e.target.files[0]);
}

onSubmit(form) {
  this.serv.updateExamById(this.id, this.file).subscribe();
}

// Service
updateExamById(id, file: File) {
  const fd = new FormData();   
  fd.append('file', file, file.name);
  return this.http.put<Examen>(APIURL + '/update/' + id, fd);
}

//组件
私有文件：file=null；
文件更改（e）{
this.file=e.target.files[0]）；
}
提交（表格）{
this.serv.updateexambyd（this.id，this.file）.subscribe（）；
}
//服务
updateExamById（id，文件：file）{
const fd=new FormData（）；
fd.append（'file'，file，file.name）；
返回这个.http.put（apirl+'/update/'+id，fd）；
}

您能包含ExamService代码吗？当然，我已经添加了它被发送到Java Spring中的后端。我使用了HttpHeaders（）.delete（'Content-Type'）相反，这是可行的，但现在我得到了一个错误

请求被拒绝，因为没有找到多部分边界

不幸的是，您将需要一个内容类型集-您是否尝试了“多部分/表单数据”？是，这给了我另一个错误。根据我的发现，我应该删除内容类型，以便chrome可以自动设置它。我相信会发生这种情况，但不知何故，它没有看到我的FormDataInterest的name参数-只是看了一眼，angular的

HttpClient

类实际上根据作为

FormData

实例的主体自动检测内容类型。也许试着不要在选项中传递任何

HttpHeader

？我的意思是，基于

FormData

httpclient为您删除内容类型的原因正是您描述的-chrome是为您设置的。另外（这是一个大胆的尝试），您可以尝试在FormData中的“文件”之前添加“名称”吗？