Angular 文件上传进度百分比[重复]

Angular 文件上传进度百分比

bash
npm install @angular/common@latest @angular/http@latest

typescript
import { Injectable } from '@angular/core';
import { HttpClient, HttpEvent, HttpEventType, HttpRequest } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
  providedIn: 'root'
})
export class FileUploadService {
  constructor(private http: HttpClient) { }
  uploadFile(file: File): Observable {
    const formData: FormData = new FormData();
    formData.append('file', file);
    const req = new HttpRequest('POST', 'your-upload-api-endpoint', formData, {
      reportProgress: true,
    });
    return this.http.request(req).pipe(
      map((event: HttpEvent) => {
        if (event.type === HttpEventType.UploadProgress) {
          const percentDone = Math.round((100 * event.loaded) / event.total);
          return percentDone;
        } else if (event.type === HttpEventType.Response) {
          // File upload is complete
          return 100;
        }
      })
    );
  }
}

typescript
import { Component } from '@angular/core';
import { FileUploadService } from './file-upload.service';
@Component({
  selector: 'app-file-upload',
  templateUrl: './file-upload.component.html',
  styleUrls: ['./file-upload.component.css']
})
export class FileUploadComponent {
  constructor(private fileUploadService: FileUploadService) { }
  onFileSelected(event: any): void {
    const file: File = event.target.files[0];
    if (file) {
      this.fileUploadService.uploadFile(file).subscribe(
        percent => {
          console.log(`File upload progress: ${percent}%`);
        },
        error => {
          console.error('File upload failed:', error);
        }
      );
    }
  }
}