ant design中upload组件上传大文件，显示进度条进度条

Upload组件是自带上传进度，但是样式调起来很麻烦，我们要做的就是自定义一个

首先页面要引入组件 Upload， Progress

uploadAttachmentsProps = {
	action: `/api/upload`,
	showUploadList: false, // 这里关闭自带的列表
	beforeUpload: (info) => {
	/* 上传前的钩子，可以用来判断类型，和大小	
		if ('是否符合类型') {
			return false
		}
		if ('是否符合类型') {
			return false
		}
		return true
	*/
	}，
	onChange: (info) => {
		console.log(info)
		/*
			回调有三个参数
			{
			  file: { ... },
			  fileList: [ ... ],
			  event: { ... }
			}
		*/ 
	}
} 


<Upload {...uploadAttachmentsProps}>
  <a style={{marginRight: '10px'}}><Icon type="plus"></Icon>添加</a>
</Upload> 

进度条我们需要回调里的 event，

const event = info.event
if (event) { // 一定要加判断，不然会报错
  let percent = Math.floor((event.loaded / event.total) * 100)

  this.setState({percent: percent})
  console.log(percent) // percent就是进度条的数值
}

进度条组件：

 <Progress percent={this.state.percent} />