web-dev-qa-db-ja.com

Angularファイルアップロードの進捗率

私が開発している私のアプリケーションでは、Angular 4、ユーザーはマルチパートファイルをサーバーにアップロードできます。ファイルは大きくなります。できますか？

前もって感謝します！

angularfilefile-uploadmultipart
13
komron

Angular4を使用しているため、Listening to progressイベントを使用して、@angular/common/http.

ドキュメントからコードを追加し、

const req = new HttpRequest('POST', '/upload/file', file, {
  reportProgress: true,
});

その後、

http.request(req).subscribe(event => {
  // Via this API, you get access to the raw event stream.
  // Look for upload progress events.
  if (event.type === HttpEventType.UploadProgress) {
    // This is an upload progress event. Compute and show the % done:
    const percentDone = Math.round(100 * event.loaded / event.total);
    console.log(`File is ${percentDone}% uploaded.`);
  } else if (event instanceof HttpResponse) {
    console.log('File is completely uploaded!');
  }
});

[〜＃〜] edit [〜＃〜]OPはangular2で使用したかったため、こので述べたようにObservableとしてラップされたネイティブJavaScript XHRを使用する必要があります answer

27
Sajeetharan
uploadDocument(file) {

    return this.httpClient.post(environment.uploadDocument, file, { reportProgress: true, observe: 'events' })
}
2
Shantam Mittal

Gajender.service.ts

 import { Injectable } from '@angular/core';
 import {HttpClient, HttpParams, HttpRequest, HttpEvent} from '@angular/common/http';
 import {Observable} from "rxjs";

      constructor(private http: HttpClient) {
      }

       uploadFileData(url: string, file: File): Observable<HttpEvent<any>> {

        let formData = new FormData();
        let user = {
          name : 'Gajender'
        }
        formData.append('file', file);
        formData.append("user", JSON.stringify(user)); 

        let params = new HttpParams();

        const options = {
          params: params,
          reportProgress: true,
        };

        const req = new HttpRequest('POST', url, formData, options);
        return this.http.request(req);
      }

ser.component.ts

constructor( private gajender: Gajender) { }
  @ViewChild('selectfile') el:ElementRef;   //in html we make variable of selectfile
  progress = { loaded : 0 , total : 0 };

uploadFile = (file) => {
    var filedata = this.el.nativeElement.files[0];
    this.gajender.uploadFileData('url',filedata)
    .subscribe(
      (data: any) => { 
        console.log(data);
        if(data.type == 1 && data.loaded && data.total){
          console.log("gaju");
          this.progress.loaded = data.loaded;
          this.progress.total = data.total;
        }
        else if(data.body){
          console.log("Data Uploaded");
          console.log(data.body);
        }

       },
      error => console.log(error) 
    )

ser.component.html

<form enctype="multipart/form-data"  method="post">
  <input type='file' [(ngModel)]="file" name="file" #selectfile >
  <button type="button" (click)="uploadFile(file)">Upload</button>
</form>
Progress
<progress [value]=progress.loaded  [max]=progress.total>
</progress>
1
Gajender Singh

これを簡単に実現できます：

npm i angle-progress-http

モジュールをインポートしたら、その下にapp.module.tsまたはアプリモジュールをスタックする場所に追加できますアプリケーションで。

これをインポートします（app.module.tsで）：

import { HttpModule } from '@angular/http';

import { ProgressHttpModule } from 'angular-progress-http';

まだapp.module.tsにあります

@NgModuleで

@NgModule({

  imports: [

    HttpModule,

    ProgressHttpModule
  ]
})

次に、コンポーネントファイル（whatever.component.ts）で、使用する場所を指定します。これを配置できます：

import { ProgressHttp } from 'angular-progress-http';

次に、次のように実装します。

constructor(private http: ProgressHttp) {}
    onSubmit(): void {
        const _formData = new FormData();
        _formData.append('title', this.title);
        _formData.append('doc', this.doc);

        this.http.withUploadProgressListener(progress => { console.log(`Uploading ${progress.percentage}%`); })
        .withDownloadProgressListener(progress => { console.log(`Downloading ${progress.percentage}%`); })
        .post('youruploadurl', _formData)
        .subscribe((response) => {
            console.log(response);
        });
    }
1
tolulope owolabi

角度読み込みバーライブラリを使用します。角度読み込みバーライブラリを使用したくない場合は、進行コールバックeq-xhrrequest.upload.onprogressを使用できます。

0
k.prerna