Question

将工作this.http.post更改为this.http.request后，为了能够跟踪上传进度以及为什么只能在Firefox上运行，会出现此错误？我没有正确创建Request对象吗？

未发送任何请求（网络标签中没有任何内容）。

参数file可以来自files的{{1}} - 属性，或来自input[type=file]事件，但没有任何区别。我记录了＆amp;验证drop在两种情况下都是有效的File对象。

Chrome，Edge和IE11没有任何问题。这适用于所有情况相同的浏览器：file

尝试return this.http.post('/filesystem/upload', formData, { withCredentials: true })和withCredentials:false，没有区别。

Angular：5.2.5

浏览器：Firefox 58.0.2 Windows

reportProgress:false

错误：

  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。向两者添加了console.logging，除第一个event外没有记录任何内容。那么这Editing the right file是什么呢？ event内部有什么东西？发生了什么事？！

XMLHttpRequest

修改

添加了issue in GitHub。

Answer 1

这完全是因为我的地图调用中return event而不是return e。这花了半天时间。为什么编译器和其他浏览器会让这样的东西滑落，然后Firefox就会抓住它（并提供一个非常有用的堆栈跟踪）？

在Firefox上使用请求方法错误的HttpClient POST：未定义事件

1 个答案: