获取错误类型错误:无法读取属性“长度”错误

Question

我收到错误：

错误类型错误： 无法读取在评估 （webpack-internal:///./node_modules/@angular/common/esm5/http.js:163） 处未定义的属性 “长度”在 Array.forEach （） 在 httpHeaders.lazyInit （webpack-internal:///./node_modules/@angular/common/esm5/http.js:157） 在 httpHeaders.init （webpack-internal:///./node_modules/@angular/common/esm5/http.js:305） 在 HttpHeaders.foreach （webpack-internal:///./node_modules/@angular/common/esm5/http.js:408） 在可观察的评估中 [作为_subscribe] （网络包-internal:///./node_modules/@angular/common/esm5/http.js:2210） 在 Observable._trySubscribe （网络包-internal:///./node_modules/rxjs/_esm5/Observable.js:177） 在 可观察.订阅 （网络包-internal:///./node_modules/rxjs/_esm5/Observable.js:165） 在订阅到结果 （网络包-internal:///./node_modules/rxjs/_esm5/util/subscribeToResult.js:32） 在 MergeMapSubscriber._innerSub （网络包-internal:///./node_modules/rxjs/_esm5/operators/mergeMap.js:143）

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

这是我的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>

这是组件:

export class SupervisorExamenAanpassenComponent implements OnInit {
  @Input() examen: Examen = new Examen(null, '', '', null);
  id: number;

  constructor(private serv: ExamService, private route: ActivatedRoute) { }

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

  fileChanged(e) {
    const reader = new FileReader();
    reader.onload = () => {
      this.examen.file = reader.result;
    };
    reader.readAsText(e.target.files[0]);
  }

  ngOnInit() {
    this.route.params.subscribe(params => this.id = params.id);
    this.serv.getExamById(this.id).subscribe((data) => this.examen = data);
  }

}

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

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

编辑：

考试服务:

@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}});
  }
}

Answer 1

从考试服务中的 http.put 调用中删除此参数：

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

您不需要设置内容类型，因为根据我们下面的讨论，这些将通过安格的 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);
}