Question

我有下一个Angular服务，可以使用预设的URL将文件上传到Amazon S3：

Itemsvector = c("white hanging heart holder","black suitcase")
Wordsvector = c("white","hanging","heart","holder","black", "suitcase")

该服务在开发环境中运行良好。但是，由于某种原因，在生产环境中不会触发进度事件（上传完全完成后会进行更新）。我还尝试根据一些在互联网上存在类似问题的示例，将下一个参数添加到HttpRequest对象中，但是看起来这已经过时了，并且不会影响任何内容：

    import { Injectable } from "@angular/core";
    import { HttpClient, HttpRequest, HttpHeaders, HttpEvent, HttpEventType, HttpErrorResponse, HttpParams } from "@angular/common/http";
    import { map, tap, last } from 'rxjs/operators';

    @Injectable()
    export class S3FileUploadService {
      constructor(private _http: HttpClient) {
      }

      upload(url: string, file: File | Blob, progress: (percent: number) => void, result: (msg: StateMessage) => void) {
        const req = new HttpRequest('PUT', url, file, {
          headers: new HttpHeaders().set("Content-Type", "binary/octet-stream"),
          reportProgress: true,
        });

        this._http.request(req).pipe(
          map(event => this._getProgress(event)),
          tap(value => progress(value)),
          last()
        ).subscribe(() => {
          result({ err: false, msg: "Uploaded" });
        }, (err) => {
          result({ err: true, msg: this._errorMsg(err, "Not uploaded") });
        });
      }

      private _getProgress(event: HttpEvent<any>) {
        switch (event.type) {
          case HttpEventType.Sent:
            return 0;
          case HttpEventType.UploadProgress:
            return Math.round(10000 * event.loaded / event.total) / 100;
          case HttpEventType.Response:
            return 100;
        }
      }
    }

问题可能是由什么引起的？它可以不是源自Angular构建，而是源自S3而不返回进度吗？

Answer 1

我遇到了同样的问题，并将其追溯到服务人员。如果您在产品中启用了Service Worker（服务时可能未构建Service Worker），那么它可能会以不同的方式处理POST请求

如果是这种情况，那么您可以按照此处的建议进行一些修改 Progress bar doesn't work using service workers with angular cli

Angular HttpRequest进度事件在调试版本中触发，但在生产版本中不起作用

1 个答案: