Axios：onUploadProgress 事件仅在视频完全上传后触发答案

【问题标题】：Axios: onUploadProgress event gets only triggered after video is uploaded completelyAxios：onUploadProgress 事件仅在视频完全上传后触发
【发布时间】：2021-01-25 14:56:32
【问题描述】：

我正在尝试跟踪视频上传的进度并将其显示给用户。
这是上传视频的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)

问题是它只有在视频完全上传时才会触发。
我发现这个Github Axios Issue：

如果您的上传文件太小，则只能触发 100%，或者下载/上传速度太快。尝试上传 10mb 的文件。

所以我尝试上传一个 100Mb 的视频，但在上传结束时仍会触发该事件。
知道为什么会这样吗？
我可以微调 axios 以使事件在某些进度值处触发吗？

【问题讨论】：

标签： javascript reactjs axios httprequest

【解决方案1】：

您的代码需要为请求添加 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;

上述代码的简短说明：

customHeader：将任何标头传递给配置，例如："Content-Type", "Authorization", etc...
cbProgress：这是一个回调，当函数被调用并正在进行时。
cb：这是一个回调，当函数被调用并上传完成时。

注意：FormData，用于发送文件，必须使用。

FormData 接口提供了一种轻松构造一组表示表单字段及其值的键/值对，可以然后使用 XMLHttpRequest.send() 方法轻松发送。它用如果将编码类型设置为，则表单将使用相同的格式 “多部分/表单数据”。

最后 - 你可以在任何你想要的地方调用这个实用函数，如下所示：

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) => {
      // ...
    }
  );

【讨论】：