使用Angular 7上传文件时，表单数据并非总是在Chrome中发送 [英] Form data not always send in Chrome when uploading file with Angular 7

问题描述

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

When uploading files with my Angular 7 app using angular-file, form data is not always send with Chrome (macOS). I have no problems with Firefox or Safari. Refreshing Chrome (F5) helps at least last time when this happened.

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

I upgraded angular-file to it's newest version but it didn't helped. I think this isn't angular-file problem, because I use Angular common's HttpRequest to do the upload.

角度代码如下:

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

上传成功后，它将打印到控制台:

When upload works it prints to console:

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!

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

But when it fails it prints:

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

当我检查网络"选项卡时，如果上传失败，则请求标题"之后根本没有表单数据"部分.仍然在请求标头中正确设置了内容类型:内容类型:multipart/form-data； border = ---- WebKitFormBoundary2SRIMu3Tb4HzNjJo"

When I check network tab there isn't "Form Data" section after "Request Headers" at all when upload fails. Still in request header there's content type set correctly: "Content-Type: multipart/form-data; boundary=----WebKitFormBoundary2SRIMu3Tb4HzNjJo"

我正在使用Angular的默认服务工作者，因此想知道是否会导致这些问题?

I'm using Angular's default service worker so wondering if it could cause these problems?

推荐答案

解决方案是在url中添加ngsw-bypass -parameter(在Angular 8中引入)，例如:

Solution was to add ngsw-bypass -parameter (introduced in Angular 8) into url, like:

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

这篇关于使用Angular 7上传文件时，表单数据并非总是在Chrome中发送的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！