时间戳

首页 > 解决方案 > 使用 Angular 7 上传文件时，表单数据并不总是在 Chrome 中发送

angular - 使用 Angular 7 上传文件时，表单数据并不总是在 Chrome 中发送

问题描述

使用 Angular 文件通过我的 Angular 7 应用程序上传文件时，表单数据并不总是使用 Chrome (macOS) 发送。我对 Firefox 或 Safari 没有任何问题。刷新 Chrome (F5) 至少在上次发生这种情况时有所帮助。

我将 angular-file 升级到最新版本，但没有帮助。我认为这不是角度文件问题，因为我使用 Angular common 的 HttpRequest 进行上传。

Angular 代码如下所示：

  uploadFile(file: File, type: string): Subscription {
    const fileFormData: FormData = new FormData();
    fileFormData.append("file", file, file.name);

    const req = new HttpRequest<FormData>('PUT', '/api/v2/images/' + type, fileFormData, {
      reportProgress: true
    });

    return this.httpEmitter = this.http.request<any>(req)
      .subscribe(
        event => {
          this.appUtil.logHttpEvent(event, file);

          if (event instanceof HttpResponse) {
            this.httpEmitter.unsubscribe();
            this.setImageUrl(type);
          }
        }
      );
  }

  logHttpEvent(event: any, file: File) {
        switch (event.type) {
            case HttpEventType.Sent:
                console.log(`Uploading file "${file.name}" of size ${file.size}.`);
                return;

            case HttpEventType.UploadProgress:
                const percentDone = Math.round(100 * event.loaded / event.total);
                console.log(`File "${file.name}" is ${percentDone}% uploaded.`);
                return;

            case HttpEventType.ResponseHeader:
                console.log(`File "${file.name}" upload got response header ${event.status}/${event.statusText}`);
                return;

            case HttpEventType.DownloadProgress:
                console.log(`File "${file.name}" upload got download progress loaded ${event.loaded} bytes`);
                return;

            case HttpEventType.Response:
                console.log(`File "${file.name}" was completely uploaded!`);
                return;

            default:
                console.log(`File "${file.name}" surprising upload event: ${event.type}.`);
                return;
        }
    }

当上传工作时，它会打印到控制台：

main.23cb89c05a4329fb2f30.js:1 Uploading file "logo.png" of size 6631.
main.23cb89c05a4329fb2f30.js:1 File "logo.png" upload got response header 200/OK
main.23cb89c05a4329fb2f30.js:1 File "logo.png" upload got download progress loaded 1930 bytes
main.23cb89c05a4329fb2f30.js:1 File "logo.png" was completely uploaded!

但是当它失败时，它会打印：

main.23cb89c05a4329fb2f30.js:1 Uploading file "logo.png" of size 6631.
POST https://www.example.com/api/v2/images/logo 500
main.23cb89c05a4329fb2f30.js:1 File "logo.png" upload got response header 500/OK
main.23cb89c05a4329fb2f30.js:1 File "logo.png" upload got download progress loaded 205 bytes

当我检查网络选项卡时，上传失败时，“请求标头”之后根本没有“表单数据”部分。仍在请求标头中正确设置了内容类型：“Content-Type: multipart/form-data; boundary=----WebKitFormBoundary2SRIMu3Tb4HzNjJo”

我正在使用 Angular 的默认服务工作者，所以想知道它是否会导致这些问题？

标签： angulargoogle-chrome

解决方案

解决方案是将 ngsw-bypass -参数（在 Angular 8 中引入）添加到 url，例如：

const req = new HttpRequest<FormData>('POST', '/api/v2/attachments/orders/' + this.order.id + '?ngsw-bypass=true', fileFormData, {
  reportProgress: true
});

推荐阅读