antd upload 如何控制进度条 官方的例子里都没有设置onprogress 可是有的例子有进度条 有的例子却没有

Question

antd官网的upload没有写上设置进度的方法，可是它列举的几个例子有的有进度条显示，有的没有进度条显示（例如最后的拖拽上传的例子） 请问如何可以将upload和progress结合起来

Answer 1

upload-cn-onChange
看文档要仔细点.
链接最下面有说明,在onChange事件中可以拿到进度.

Answer 2

楼上正解，这是我从官方实例复制的代码，

import { Upload, Icon, message } from 'antd';

function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result));
  reader.readAsDataURL(img);
}

function beforeUpload(file) {
  const isJPG = file.type === 'image/jpeg';
  if (!isJPG) {
    message.error('You can only upload JPG file!');
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    message.error('Image must smaller than 2MB!');
  }
  return isJPG && isLt2M;
}

class Avatar extends React.Component {
  state = {};

  handleChange = (info) => {
    if (info.file.status === 'done') {
      // Get this url from response in real world.
      getBase64(info.file.originFileObj, imageUrl => this.setState({ imageUrl }));
    }
  }

  render() {
    const imageUrl = this.state.imageUrl;
    return (
      <Upload
        className="avatar-uploader"
        name="avatar"
        showUploadList={false}
        action="//jsonplaceholder.typicode.com/posts/"
        beforeUpload={beforeUpload}
        onChange={this.handleChange}
      >
        {
          imageUrl ?
            <img src={imageUrl} alt="" className="avatar" /> :
            <Icon type="plus" className="avatar-uploader-trigger" />
        }
      </Upload>
    );
  }
}

ReactDOM.render(<Avatar />, mountNode);

Answer 3

不要只看Demo 文档才是重点 Demo只是大体的效果

Answer 4

同问，我只是使用antd的ui，不用它的上传功能，连它的onchange，所以怎么控制进度条啊

Answer 5

https://juejin.im/post/5e984a...
自定义Upload上传逻辑和展示

涉及到的属性

• customRequest 通过覆盖默认的上传行为，可以自定义自己的上传实现
• onChange

Answer 6

那么问题来了，隐藏默认的进度条，展示我的进度条，这个怎么搞