前端实现网络请求进度条显示

需求背景

产品希望文件上传时能有进度条显示，但是这种小功能要去使用WebSocket或者轮询啥的没太大必要，同时由于后端使用的是FastAPI 后端框架，本身并不直接支持提供上传进度给前端，因此只能由前端自己实现

介绍

前端可以通过 onprogress 事件来实现文件上传时的进度显示，但这仅限于在前端层面监控到从客户端到服务器的请求进度，而不是后端处理该文件之后可能发生的其他操作（例如进一步存储到数据库或云存储服务）的进度。

代码实现

  import axios, { AxiosRequestConfig, AxiosProgressEvent } from "axios";

  const handleUpload = () => {
    const formData = new FormData();
    fileList.forEach((ele) => {
      formData.append("files", ele);
    });
    const token = localStorage.getItem(ACCESS_TOKEN_KEY) || "";
    const config: AxiosRequestConfig<FormData> = {
      headers: {
        Authorization: `${token}`,
      },
      onUploadProgress: (progressEvent: AxiosProgressEvent) => {
        const progress = Math.round(
          (progressEvent.loaded / progressEvent.total) * 100
        );
        // 因为后端还有其他操作，percent为100时请求还没结束，只能先这样暴力处理了，等请求结束再设为100
        if (progress <= 95) {
          setPercent(progress);
        }
      },
    };

    return axios
      .post(
       '/your/upload/api',
        formData,
        config
      )
      .then(() => {
        setPercent(100);
      });
  };