web-dev-qa-db-ja.com

HttpRequestとreportProgressが機能しないか、リクエストを台無しにする

Angular 5でファイルアップロードサービスを実装していますが、アップロードの進行状況についてユーザーにフィードバックを提供したいと思います。次のreportProgressパラメーターの使用を提案するページがいくつか見つかりました。 Angulars HttpClientを使用しますが、動作させることができません。

私はすべてのhttpリクエストにラッパークラスを使用します。ラッパークラスはいくつかのロジックを実行し、最終的にすべてのリクエストは呼び出されているのと同じメソッドになります。

public request(request: HttpRequest<any>, options?: any): Observable<any> {
  return this.httpClient.request(request.method, request.url, {
    body: request.body,
    headers: request.headers,
    responseType: request.responseType,
    ...options
  });
}

次に、{ reportProgress: true }をoptionsとして、アップロード（投稿）呼び出しを渡します。これはまったく機能せず、リクエストの何も変更されませんでした。そのため、実際にはHttpRequestコンストラクターでreportProgress-パラメーターを使用して機能させる必要があると考え、それに応じてコードを変更しました。

public request(request: HttpRequest<any>, options?: any): Observable<any> {
  return this.httpClient.request(
    new HttpRequest(request.method, request.url, request.body, {
      headers: request.headers,
      responseType: request.responseType,
      ...options
    })
  );
}

これにより、さらに奇妙な動作が発生します。オプションがどのように表示されても、リクエストからの応答として常に{type: 0}のみを受け取ります。

私は何を監督していますか？私はAngular 5.1.1を使用していますが、今ここで少し戸惑っています。

したがって、明確な例を示すために、現在、これら2つのHttpRequestに対して同じ応答を受け取ります。

{  
  "url":"http://127.0.0.1:8888/test",
  "body":{  
   "data":"testdata"
  },
  "reportProgress":false,
  "withCredentials":false,
  "responseType":"json",
  "method":"POST",
  "headers":{ some-headers ... }
}

そしてこのリクエスト：

{  
  "url":"http://127.0.0.1:8888/api/pages",
  "body":{  
    "pageUrl":"http://localhost:1234/"
  },
  "reportProgress":true,
  "withCredentials":false,
  "responseType":"json",
  "method":"POST",
  "headers":{ some-headers ... }
}
angularfile-uploadhttprequestangular-httpclient
4
tommueller

私は問題を解決しました。実際、質問で説明されている行動に関係していることが2つありました。

まず第一に... rtfm！ https://angular.io/api/common/http/HttpClient

このメソッド[HttpClient.request（）]は、2つの方法のいずれかで呼び出すことができます。 HttpRequestインスタンスを唯一のパラメーターとして直接渡すか、メソッドを最初のパラメーターとして渡し、文字列URLを2番目に、オプションハッシュを3番目に渡すことができます。

HttpRequestオブジェクトが直接渡される場合、生のHttpEventストリームのObservableが返されます。

これは、私の2つのリクエスト（どちらもHttpRequestとして渡されたものがreportProgressまたはtrueであるfalse- paramterに関係なく、今後{type: 0}を返す理由を説明しています。

一方、SENTイベント（{type: 0}）を受信するだけで、バックエンド自体の構成が誤っていました。

4
tommueller

{reportProgress：true}と一緒に、{observe： 'events'}を送信する必要があります

this.httpClient.post(environment.uploadDocument, file, { reportProgress: true, observe: 'events' })
.subcribe(data =>{
if (data['type'] === HttpEventType.UploadProgress) {
   console.log('loaded ', data['loaded'], '   total  -', data['total']);
   }
})
7
Shantam Mittal

この方法は役立つかもしれません

public progress: number = 0;
public message: string = "";

constructor(private http: HttpClient) {}

onSubmit() {
    // replace with your request data
    const formModel = this.userForm.value;
    let formData = new FormData();

    formData.append("upload", formModel.upload);

    const uploadReq = new HttpRequest('POST', 'api/Upload', formData, {
        reportProgress: true,
    });

    this.http.request(uploadReq).subscribe((event) => {
        if (event.type === HttpEventType.UploadProgress) {
            this.progress = Math.round(100 * event.loaded / event.total);
        }
        else if (event.type === HttpEventType.Response) {
            this.message = event.body.toString();
        }
    });
}
6
Sam B

読んだ後 https://stackoverflow.com/a/54899930/1429439observe： 'events'パラメーターとサブスクリプションでHttpEventsの受信を開始しました。

2
C.M.
return this.http.request('POST', api_enpoint , { body: body, headers: headers, reportProgress: true, withCredentials: true }).map(httpResponse => {
   console.log(httpResponse);
});

HttpRequestオブジェクトを渡す代わりに、この方法でリクエストを渡す必要があります（httpとhttpsの両方で機能します）

1
punitmirani30

ヘッダーの詳細とともにフォームデータをアップロードします

このスニペットは、フォームデータをアップロードするのに役立ちます。サブスクライブ中に、プログレスバーを実装することもできます。

uploadMyImage(formData: any) {
    const httpOptions = new HttpHeaders({
      'Content-Type': 'multipart/form-data', 'boundary': 'something'
      });
    return this.http.post('http://localhost:4000/api/upload', formData, { reportProgress: true, observe: 'events', headers: httpOptions });
  }
0
Rijo