获取错误TypeError：无法读取属性“长度”错误(Getting ERROR TypeError: Cannot read property 'length' error)

我收到错误：

ERROR TypeError：无法读取eval处未定义的属性“长度”（webpack-internal：///./node_modules/@angular/common/esm5/http.js：163）at Array.forEach（）at HttpHeaders.lazyInit（webpack - 内部：///./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 （webpack-internal：///.angular/common/esm5/http.js:2210）在Observable._trySubscribe（webpack-internal：///./node_modules/rxjs/_esm5/Observable.js：177） MergeMapSubscriber._innerSub（webpack-internal）上的subscribeToResult（webpack-internal：///./node_modules/rxjs/_esm5/util/subscribeToResult.js：32）：///./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行，它是：

编辑：

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

I am getting the error:

ERROR TypeError: Cannot read property 'length' of undefined at eval (webpack-internal:///./node_modules/@angular/common/esm5/http.js:163) at Array.forEach () at HttpHeaders.lazyInit (webpack-internal:///./node_modules/@angular/common/esm5/http.js:157) at HttpHeaders.init (webpack-internal:///./node_modules/@angular/common/esm5/http.js:305) at HttpHeaders.forEach (webpack-internal:///./node_modules/@angular/common/esm5/http.js:408) at 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) at subscribeToResult (webpack-internal:///./node_modules/rxjs/_esm5/util/subscribeToResult.js:32) at MergeMapSubscriber._innerSub (webpack-internal:///./node_modules/rxjs/_esm5/operators/mergeMap.js:143)

It happens when I try to upload a file and I don't understand why since I'm not using the length() function anywhere.

This is my 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>

And this the Component:

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

On the second time I try to submit it also tells me the error is from the HTML line 6 which is:

EDIT:

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

最满意答案

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

Remove this parameter from the http.put call in the ExamService:

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

You won't need to set Content-Type since, per our discussion below, these will be set correctly for you by angular's HttpClient api.

Also, don't use FileReader to convert the file's Blob content to plain text. Instead just store a reference to the File and on submit append the File and its Name to the FormData. E.g.

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

更多推荐