时间戳

首页 > 解决方案 > 自定义上传进度条 React

reactjs - 自定义上传进度条 React

问题描述

我正在开发一个 Web 应用程序，我将数据发送到服务器并获取响应。这是工作流程：

用户上传视频并将其发送到服务器并获取响应。与此同时，我想展示一个自定义进度。

到目前为止，我正在像这样在 JavaScript 中使用 Progress Event 来显示进度条。

const options = {
  onUploadProgress: (progressEvent) => {
    const { loaded, total } = progressEvent;
    let percent = Math.floor((loaded * 100) / total);

    if (percent < 100) {
      this.setState({ uploadPercentage: percent });
    }
  },
};

我将其与数据一起发送到服务器

      axios.post(URL, data, options)
        .then(({ data }) => {
          this.setState(
            {
              uploadPercentage: 100,
              data: data,
            },
            () => {
              setTimeout(() => {
                this.setState({ uploadPercentage: 0 });
              }, 1000);
            }
          );
        })
        .then((error) => {
          if (error) {
            console.log(error);
          }
        });

这就是我渲染进度条的方式

{
  this.state.uploadPercentage > 0 && (
    <div className="progress mb-2">
      <div
        className="progress-bar progress-bar-striped progress-bar-animated"
        role="progressbar"
        aria-valuenow={`${this.state.uploadPercentage}%`}
        aria-valuemin="0"
        aria-valuemax="100"
        style={{ width: `${this.state.uploadPercentage}%` }}
      ></div>
    </div>
  );
}

但我想显示一些像这样的文本序列，每个应该显示几秒钟

初始化模型......将
视频分解成帧......
寻找面孔......
分离成面具或没有面具......

然后会显示输出。

谁能帮我吗？

标签： reactjsapirequestprogress-bar

解决方案

推荐阅读