Question

首先，抱歉，如果我无法正确解释。请发表评论，以便在遗漏某些东西时再次解释。会非常感谢任何帮助

我正在尝试在我的React Upload组件中动态地实现引导进度栏，同时使用axios发送发布请求。

目前，我实现的目标是直接达到95％，然后完成

但是我希望实现如下示例：

https://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=dynamically-change-bootstrap-progress-bar-value

我的全部内容都可以在这里找到：https://jsfiddle.net/7mgtkub3/


 sendRequest(file) {
    return new Promise((resolve, reject) => {
      const dataForm = new FormData();
      dataForm.append("datafile", file, file.name);
      var self = this;
      self.setState({
        uploadProgress: 95
      });
      axios
        .post(
          `/api/dataset/${this.props.spreadSheetData._id}/upload`,
          dataForm,
          {
            headers: {
              "Content-Type": "multipart/form-data"
            }
          }
        )
        .then(function(response) {
          self.setState({
            uploadProgress: 100
          });
          //console.log("SUCCESS!!");
          self.props.formSubmitted(response.data, 3);
          let filesToUpload = self.state.filesToUpload.slice();
          filesToUpload = filesToUpload.filter(fileObj => {
            return fileObj.name !== file.name;
          });
          self.setState({
            filesToUpload: filesToUpload
          });
          let toastMsg = {
            msg: file.name + " is uploaded successfully",
            className: "lobibox-notify-success"
          };
          notify(toastMsg);
        })
        .catch(function() {
          //console.log("FAILURE!!");
          self.setState(
            {
              uploadState: "Error"
            },
            () => {
              let toastMsg = {
                msg: file.name + " is not uploaded",
                className: "lobibox-notify-error"
              };
              notify(toastMsg);
            }
          );
        });
    })
      .then(response => {})
      .catch(err => {
        console.log(err);
      });
  }

  <div className="Content">
            {this.state.uploadProgress > 0 ?  <ProgressBar
               // now={uploading}
               // label={`${uploading}`}
               now={this.state.uploadProgress} 
               label={`${this.state.uploadProgress}%`}
                animated now={this.state.uploadProgress}
              /> : ""}

Answer 1

关于您的问题

您需要订阅上传过程进度事件。如果您使用axios，则可以尝试.../dask/dataframe/core.py:4494: UserWarning: Insufficient elements for `head`. 5 elements requested, only 0 elements available. Try passing larger `npartitions` to `head`. warnings.warn(msg.format(n, len(r)))方法。

在此处修改代码：

onUploadProgress

（您可能需要更改计算的上传进度功能）

其他一些单词

您不必在代码的第二行上创建新的Promise。 Axios已经返回Promise，您可以返回axios的结果：

.post(
  `/api/dataset/${this.props.spreadSheetData._id}/upload`,
  dataForm,
  {
    headers: {
      "Content-Type": "multipart/form-data",
      onUploadProgress: (progressEvent) => self.setState({
         uploadProgress: progressEvent.loaded
      })
    }
  }
)

在反应中动态更改Bootstrap进度栏值

1 个答案: