Динамически изменить значение индикатора прогресса Bootstrap в реакции - PullRequest
Новая
       20

Динамически изменить значение индикатора прогресса Bootstrap в реакции

0 голосов
/ 03 июля 2019

Прежде всего, извинитесь, если я не смог правильно объяснить. Пожалуйста, прокомментируйте, чтобы я мог объяснить еще раз, если чего-то не хватает. Буду очень признателен за любую помощь

Я пытаюсь динамически реализовать индикатор загрузки в моем компоненте реакции загрузки при отправке запроса на публикацию с помощью 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}
              /> : ""}

1 Ответ

0 голосов
/ 03 июля 2019

О вашем вопросе

Вам необходимо подписаться на событие процесса загрузки. Если вы используете axios, вы можете попробовать onUploadProgress метод.

Измените свой код, как там: 

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

(Вам может потребоваться изменить вычисленную функцию прогресса загрузки)

Некоторые другие слова

Вам не нужно создавать новое Обещание во второй строке вашего кода. Axios уже возвращает Promise, и вы можете вернуть результат axios: 

const dataForm = new FormData();
      dataForm.append("datafile", file, file.name);
      var self = this;
      self.setState({
        uploadProgress: 95
      });
      return axios // .....
...