Данные формы не всегда отправляются в Chrome при загрузке файла с Angular 7 - PullRequest
0 голосов
/ 02 июня 2019

При загрузке файлов с помощью моего приложения Angular 7 с помощью angular-file данные формы не всегда отправляются с помощью Chrome (macOS).У меня нет проблем с Firefox или Safari.Обновление Chrome (F5) помогает, по крайней мере, в последний раз, когда это произошло.

Я обновил angular-файл до его последней версии, но это не помогло.Я думаю, что это не проблема угловых файлов, потому что я использую HttpRequest от Angular common для выполнения загрузки.

Код 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; border = ---- WebKitFormBoundary2SRIMu3Tb4HzNjJo"

Я использую работника сервиса Angular по умолчанию, поэтому мне интересно, может ли это вызвать этипроблемы?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...