Question

我收到错误：

错误类型错误：无法读取属性＆＃39;长度＆＃39;未定义的在eval（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）在Observable.eval [as _subscribe]（webpack-internal：///./node_modules/@angular/common/esm5/http.js：2210） at Observable._trySubscribe（webpack-internal：///./node_modules/rxjs/_esm5/Observable.js：177） at Observable.subscribe（webpack-internal：///./node_modules/rxjs/_esm5/Observable.js：165）在subscribeToResult（webpack-internal：///./node_modules/rxjs/_esm5/util/subscribeToResult.js:32）在MergeMapSubscriber._innerSub（webpack-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>

这就是组件：

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)">

编辑：

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

Answer 1

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

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

您不需要设置Content-Type，因为根据我们下面的讨论，这些将由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);
}

获取ERROR TypeError：无法读取属性＆＃39; length＆＃39;错误

1 个答案: