火狐上使用请求方法错误发布的HttpClient :事件未定义

Question

为什么这个错误发生在将工作的this.http.post更改为this.http.request之后，以便能够跟踪上传进度，以及为什么只在Firefox上？我是否没有正确地创建请求对象？

没有发送任何请求(网络选项卡中没有任何请求)。

参数file可以起源于input[type=file]的files-property，也可以来自drop事件，没有什么区别。我已经记录并验证了在这两种情况下file都是一个有效的文件对象。

没有问题的Chrome，边缘和IE11。这在其他情况相同的所有浏览器上都可以工作：return this.http.post('/filesystem/upload', formData, { withCredentials: true })

试过withCredentials:false和reportProgress:false，没什么不同。

角度: 5.2.5

浏览器: Firefox 58.0.2 Windows

  private sendFile(file: File) {
    this.progress$.next(0);
    const formData: FormData = new FormData();
    formData.append('file', file, file.name);
    formData.append('name', file.name);
    const req = new HttpRequest('POST', '/filesystem/upload', formData, {
      withCredentials: true,
      reportProgress: true
    });
    return this.http.request(req).pipe(
      map((e: HttpEvent<any>) => {
        switch (e.type) {
          case HttpEventType.UploadProgress:
            const percentDone = Math.round(100 * e.loaded / e.total);
            this.progress$.next(percentDone);
            break;
        }
        return event;
      }),
      last()
    );
    //  Works:
    //  return this.http.post('/filesystem/upload', formData, { withCredentials: true });
  }

错误：

ReferenceError: event is not defined
Stack trace:
FileBrowserComponent.prototype.sendFile/<@webpack-internal:///./src/app/shared/file-browser/file-browser.component.ts:427:13
MapSubscriber.prototype._next@webpack-internal:///./node_modules/rxjs/_esm5/operators/map.js:82:22
Subscriber.prototype.next@webpack-internal:///./node_modules/rxjs/_esm5/Subscriber.js:97:13
MergeMapSubscriber.prototype.notifyNext@webpack-internal:///./node_modules/rxjs/_esm5/operators/mergeMap.js:156:13
InnerSubscriber.prototype._next@webpack-internal:///./node_modules/rxjs/_esm5/InnerSubscriber.js:27:9
Subscriber.prototype.next@webpack-internal:///./node_modules/rxjs/_esm5/Subscriber.js:97:13
HttpXhrBackend.prototype.handle/<@webpack-internal:///./node_modules/@angular/common/esm5/http.js:2407:13
Observable.prototype._trySubscribe@webpack-internal:///./node_modules/rxjs/_esm5/Observable.js:178:20
Observable.prototype.subscribe@webpack-internal:///./node_modules/rxjs/_esm5/Observable.js:166:88
subscribeToResult@webpack-internal:///./node_modules/rxjs/_esm5/util/subscribeToResult.js:32:20
MergeMapSubscriber.prototype._innerSub@webpack-internal:///./node_modules/rxjs/_esm5/operators/mergeMap.js:143:18
MergeMapSubscriber.prototype._tryNext@webpack-internal:///./node_modules/rxjs/_esm5/operators/mergeMap.js:140:9
MergeMapSubscriber.prototype._next@webpack-internal:///./node_modules/rxjs/_esm5/operators/mergeMap.js:123:13
Subscriber.prototype.next@webpack-internal:///./node_modules/rxjs/_esm5/Subscriber.js:97:13
ScalarObservable.prototype._subscribe@webpack-internal:///./node_modules/rxjs/_esm5/observable/ScalarObservable.js:53:13
Observable.prototype._trySubscribe@webpack-internal:///./node_modules/rxjs/_esm5/Observable.js:178:20
Observable.prototype.subscribe@webpack-internal:///./node_modules/rxjs/_esm5/Observable.js:166:88
MergeMapOperator.prototype.call@webpack-internal:///./node_modules/rxjs/_esm5/operators/mergeMap.js:97:16
Observable.prototype.subscribe@webpack-internal:///./node_modules/rxjs/_esm5/Observable.js:163:13
MapOperator.prototype.call@webpack-internal:///./node_modules/rxjs/_esm5/operators/map.js:60:16
Observable.prototype.subscribe@webpack-internal:///./node_modules/rxjs/_esm5/Observable.js:163:13
LastOperator.prototype.call@webpack-internal:///./node_modules/rxjs/_esm5/operators/last.js:43:16
Observable.prototype.subscribe@webpack-internal:///./node_modules/rxjs/_esm5/Observable.js:163:13
Observable.prototype.toPromise/<@webpack-internal:///./node_modules/rxjs/_esm5/Observable.js:292:13
ZoneAwarePromise@webpack-internal:///./node_modules/zone.js/dist/zone.js:875:29
Observable.prototype.toPromise@webpack-internal:///./node_modules/rxjs/_esm5/Observable.js:290:16
FileBrowserComponent.prototype.upload/</<@webpack-internal:///./src/app/shared/file-browser/file-browser.component.ts:505:46
step@webpack-internal:///./src/app/shared/file-browser/file-browser.component.ts:49:18
verb/<@webpack-internal:///./src/app/shared/file-browser/file-browser.component.ts:30:53
__awaiter</<@webpack-internal:///./src/app/shared/file-browser/file-browser.component.ts:24:15
ZoneAwarePromise@webpack-internal:///./node_modules/zone.js/dist/zone.js:875:29
__awaiter<@webpack-internal:///./src/app/shared/file-browser/file-browser.component.ts:20:12
FileBrowserComponent.prototype.upload@webpack-internal:///./src/app/shared/file-browser/file-browser.component.ts:453:16
FileBrowserComponent.prototype.fileInputChange/</<@webpack-internal:///./src/app/shared/file-browser/file-browser.component.ts:435:50
step@webpack-internal:///./src/app/shared/file-browser/file-browser.component.ts:49:18
verb/<@webpack-internal:///./src/app/shared/file-browser/file-browser.component.ts:30:53
__awaiter</<@webpack-internal:///./src/app/shared/file-browser/file-browser.component.ts:24:15
ZoneAwarePromise@webpack-internal:///./node_modules/zone.js/dist/zone.js:875:29
__awaiter<@webpack-internal:///./src/app/shared/file-browser/file-browser.component.ts:20:12
FileBrowserComponent.prototype.fileInputChange@webpack-internal:///./src/app/shared/file-browser/file-browser.component.ts:432:16
View_FileBrowserComponent_14/<@ng:///SharedModule/FileBrowserComponent.ngfactory.js:348:27
handleEvent@webpack-internal:///./node_modules/@angular/core/esm5/core.js:13759:115
callWithDebugContext@webpack-internal:///./node_modules/@angular/core/esm5/core.js:15268:39
debugHandleEvent@webpack-internal:///./node_modules/@angular/core/esm5/core.js:14855:12
dispatchEvent@webpack-internal:///./node_modules/@angular/core/esm5/core.js:10174:16
renderEventHandlerClosure/<@webpack-internal:///./node_modules/@angular/core/esm5/core.js:10799:38
decoratePreventDefault/<@webpack-internal:///./node_modules/@angular/platform-browser/esm5/platform-browser.js:2680:53
ZoneDelegate.prototype.invokeTask@webpack-internal:///./node_modules/zone.js/dist/zone.js:421:17
onInvokeTask@webpack-internal:///./node_modules/@angular/core/esm5/core.js:4952:24
ZoneDelegate.prototype.invokeTask@webpack-internal:///./node_modules/zone.js/dist/zone.js:420:17
Zone.prototype.runTask@webpack-internal:///./node_modules/zone.js/dist/zone.js:188:28
ZoneTask.invokeTask@webpack-internal:///./node_modules/zone.js/dist/zone.js:496:24
invokeTask@webpack-internal:///./node_modules/zone.js/dist/zone.js:1517:9
globalZoneAwareCallback@webpack-internal:///./node_modules/zone.js/dist/zone.js:1543:17
file-browser.component.ts:319:8

编辑：，由于堆栈跟踪中的HttpXhrBackend.prototype.handle/<@webpack-internal:///./node_modules/@angular/common/esm5/http.js:2407:13，我直接去了那个文件，在两个地方找到了event这个名字。将console.logging添加到这两个文件中，除了第一个Editing the right file之外，没有任何记录。那么这个event是什么呢？XMLHttpRequest内部的东西？怎么回事！？

console.log('Editing the right file'); // << gets logged
var onDownProgress = function (event) {
    // We never get this far
    if (!event) {
        console.log('onDownProgress event is null');
    }
    console.log('onDownProgress event is not null', event);
// ...
var onUpProgress = function (event) {
    // We never get this far either
    if (!event) {
        console.log('event undefined');
        return;
    }
    console.log('event is defined', event);
// ....

编辑：

增加了GitHub中的问题。

Answer 1

这一切都是因为我的地图调用中的return event而不是return e。花了半天时间过得真好。为什么编译器和其他浏览器会让类似的东西溜走，然后Firefox就会捕获它(并给出一个非常有用的堆栈跟踪)？