javascript - 如何显示每个图像上传的上传进度

Question

我正在使用react-dropzone进行多个图像上传。图片上传正常，但未显示上传进度。我无法在文档中清楚地找到有关显示上传进度的信息。我们如何在react-dropzone中显示上传进度？

我也创建了一个codesandbox。这是链接

https://codesandbox.io/s/8BEmjLmo

这也是代码

onDrop = (accepted, rejected) => {
    this.setState({
      accepted,
      rejected
    });
  };


  showFiles() {
    const { accepted } = this.state;
    return (
      <div>
        <h3>Dropped files: </h3>
        <ul className="gallery">
          {accepted.map((file, idx) => {
            return (
              <div className="col-md-3" key={idx}>
                <li>
                  <img
                    src={file.preview}
                    className="img-fluid img-responsive"
                    width={200}
                    alt={file.name}
                  />
                  <i
                    className="fa fa-remove"
                    onClick={e => this.handleRemove(file)}
                  />
                  <div className="imageName">{file.name}</div>
                </li>
              </div>
            );
          })}
        </ul>
      </div>
    );
  }
  render() {
    const { accepted } = this.state;
    return (
      <div style={styles}>
    <Hello name="CodeSandbox" />
    <Dropzone 
      onDrop={this.onDrop}
      style={style} 
      activeStyle={activeStyle}
      multiple
      accept="image/*"
    >
      Try Dropping file
        </Dropzone>
   {accepted.length !== 0 && this.showFiles()}
    </div>
    );
  }
}

Answer 1

react-dropzone 中没有文件上传进度这样的功能。你必须自己写，这是一个例子:

const xhr = new XMLHttpRequest();

xhr.addEventListener("progress", function(e) {
  if (e.lengthComputable) {
    let percentComplete = e.loaded / e.total;
    console.log(percentComplete);
  }
});

// Just for demo.
xhr.open("POST", "/", true);
xhr.send(null);

另一个选择是使用 React-Dropzone-Component