Javascript Axios:onUploadProgress事件只有在视频完全上传后才会触发

我正在尝试跟踪视频上传的进度，并相应地将其显示给用户。
这是上传视频的axios请求

  const config = {
    onUploadProgress: function (progressEvent) {
      var percentCompleted = Math.round(
        (progressEvent.loaded * 100) / progressEvent.total
      );
      console.group("profileActions.uploadProfileVideoURL");
      console.log("progressEvent.loaded: ", progressEvent.loaded);
      console.log("progressEvent.total: ", progressEvent.total);
      console.log("percentCompleted: ", percentCompleted);
      console.groupEnd();
    },
  };

  axios
    .post("/api/profile/uploadProfileVideoURL", videoData, config)

问题是只有在视频完全上传时才会触发。
我发现以下内容对此进行了讨论：

如果您的上传文件太小，或者 下载/上传速度太快。尝试上传10mb的文件

所以我尝试上传一个100Mb的视频，但在上传结束时仍然会触发该事件。
知道为什么会这样吗？

---

我可以微调axios以使事件在某些进度值下触发吗？

您的代码需要添加FormData和一些头，例如（文件的MIME类型）以请求。您可以使用以下逻辑：

首先-创建一个实用程序函数，用于处理上传进度，如下所示：

import axios from "axios";

const Upload = (files, customHeader, cbProgress, cb) => {
  const config = {
    onUploadProgress: function (progressEvent) {
      var percentCompleted = Math.round(
        (progressEvent.loaded * 100) / progressEvent.total
      );
      cbProgress(percentCompleted);
      console.log(percentCompleted);
    },
    headers: {
      ...customHeader,
      // "Content-Type": files[0].type,
      // "Content-Type": "multipart/form-data",
    },
  };

  let data = new FormData();
  data.append(<field_name>, files[0]); // Name of the field for uploading

  console.log({ ...customHeader });

  axios
    .post(<url>, data, config)
    .then((res) => cb(res))
    .catch((err) => console.log(err));
};

export default Upload;

const customHeader = {
    "Content-Type": files[0] && files[0].type, // This is an example
    "Content-Type": "multipart/form-data", // This is an example
  };

  Upload(
    files,
    customHeader,
    (percent) => {
      // ...
    },
    (res) => {
      // ...
    }
  );