공리가 있는 진행 막대

공리가 있는 진행 막대

진행률 표시줄을 사용하여 파일의 업로드 상태를 표시해야 한다.나는 사용하고 있다axioshttp 요청을 하기 위해.나는 그들의 github 페이지 https://github.com/mzabriskie/axios/blob/master/examples/upload/index.html에서 그 예를 따랐다.

내 코드는 이렇게 생겼어:

this.store().then(() => {
    var form = new FormData();
        form.append('video', this.file);
        form.append('uid', this.uid);

        axios.post('/upload', form, {
            progress: (progressEvent) => {
                    if (progressEvent.lengthComputable) {
                       console.log(progressEvent.loaded + ' ' + progressEvent.total);
                       this.updateProgressBarValue(progressEvent);
                    }
           }
       })                   
});

그러나 실행 중이지 않다.console.log(progressEvent.loaded + ' ' + progressEvent.total);전혀 부르지 않다.this.updateProgressBarValue(progressEvent);

어떻게 하면 해결할 수 있을까?

Axios 구성에서 읽을 수 있듯이 "진행" 이벤트 자체에 문제가 있다고 생각한다.대신 onUploadProgress 또는 onDownloadProgress를 청취하십시오.

또 다른 문제는 다음과 같은 방법으로 totalLength를 얻는 것이다: lengthComputable, length에서 길이를 구하지 않으면 압축 해제된 콘텐츠 길이를 구하지 않으면(마지막 수단으로) 값을 사용하여 원하는 모든 작업을 수행할 수 있어야 한다.

이것은 바보 같은 증명 구현이 아니다!totalLength를 사용할 수 없을 때마다 실패함

좀 더 견고하게 만들기 위해 setInterval을 사용하여 "가짜" 진행률을 구현하여 매 초마다 수동으로 진행률을 증가시킬 수 있다.약속이 해결되면 수동으로 진행률을 100%로 설정하십시오.CSS 전환을 사용하여 구현하는 경우 진행률이 항상 "정확한" 것은 아니지만 부드러운 솔루션을 얻어야 함

코드가 더 필요하면 비슷한 로더(GitHub 링크)를 만들었어.

                onUploadProgress: (progressEvent) => {
                const totalLength = progressEvent.lengthComputable ? progressEvent.total : progressEvent.target.getResponseHeader('content-length') || progressEvent.target.getResponseHeader('x-decompressed-content-length');
                console.log("onUploadProgress", totalLength);
                if (totalLength !== null) {
                    this.updateProgressBarValue(Math.round( (progressEvent.loaded * 100) / totalLength ));
                }
            });

답을 찾았다.행사의 이름은onUploadProgress그리고 난 사용했어progress

이것은 너무 많은 코딩 없이 이것을 성취하기 위한 매우 편리한 도서관이다 - https://github.com/rikmms/progress-bar-4-axios/

이전에 UploadProgress 이벤트로 진행 표시줄을 만들었었습니다.

이것은 아래와 같은 나의 예시 코드다.

import React from 'react';
import Progress from 'react-progressbar';
import axios from 'axios';
export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      progress: 0,
      uploadFile: null,
    }
  }
  onChangeFile = (event) => {
    this.setState({ uploadFile: event.target.files[0] })
  }

  onUpload = () => {
    const config = {
      onUploadProgress: progressEvent => {
        let { progress } = this.state;
        progress = (progressEvent.loaded / progressEvent.total) * 100;
        this.setState({ progress });
      }
    }

    let formData = new FormData();
    formData.append("file", this.state.uploadFile);
    axios.post('http://your_backend_url/api/v1/upload', formData, config).then(res => {
      if (res.data.status == 200) {
        console.log("done: ", res.data.message);
      }
    }).catch(err => {
      console.log("error: ", err.message);
    })
  }

  render() {
    return (
      <div className="App">
        <Progress completed={this.state.progress} />
        <input type="file" onChange={this.onChangeFile} />
        <button onClick={this.onUpload.bind(this)} >File Upload</button>
      </div>
    )
  }
}

참조URL: https://stackoverflow.com/questions/44936028/progress-bar-with-axios