Angular (8.x)不提供文件上传进度

Angular是一种流行的前端开发框架，用于构建现代化的Web应用程序。Angular提供了丰富的功能和工具，可帮助开发人员构建高效、可扩展和易于维护的应用程序。

关于文件上传进度，Angular（包括最新的版本8.x）本身并没有直接提供内置的文件上传进度功能。然而，通过使用一些第三方库和技术，我们可以轻松地实现文件上传进度的跟踪和显示。

以下是一种常见的实现方法：

使用HttpClient模块：Angular的HttpClient模块是进行HTTP通信的重要工具。我们可以利用其拦截器(interceptor)功能来跟踪上传进度。
创建一个自定义的HttpInterceptor类，实现拦截器接口，并在其中拦截上传请求。
在拦截器中，通过监听上传请求的进度事件（progress事件）来获取上传进度信息。
将进度信息传递给应用程序的其他部分，例如组件或服务，以便显示或处理。

以下是一个示例的自定义HttpInterceptor类的代码：

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';

@Injectable()
export class UploadProgressInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (req.method === 'POST' && req.url.includes('upload')) { // 仅拦截上传请求
      const clonedReq = req.clone({ reportProgress: true }); // 设置报告上传进度
      return next.handle(clonedReq).pipe(
        tap((event: HttpEvent<any>) => {
          if (event instanceof HttpResponse) {
            // 处理上传完成的情况
          } else if (event.type === HttpEventType.UploadProgress) {
            const progress = Math.round((100 * event.loaded) / event.total);
            // 处理上传进度
          }
        })
      );
    }
    return next.handle(req);
  }
}

将上述拦截器提供给应用程序的HttpClient模块使用，可以通过在app.module.ts文件中的providers数组中添加以下代码来实现：

import { HTTP_INTERCEPTORS } from '@angular/common/http';

providers: [
  {
    provide: HTTP_INTERCEPTORS,
    useClass: UploadProgressInterceptor,
    multi: true
  }
]

通过这种方式，我们可以实现对文件上传请求的拦截和进度跟踪，从而获得文件上传的进度信息并在应用程序中进行处理。

请注意，这只是一种实现方法的示例，实际上还可以使用其他第三方库和技术来实现文件上传进度的跟踪，具体方法可以根据实际需求和项目要求进行选择。

腾讯云的相关产品和产品介绍链接地址：