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} />