【antd 的Upload组件onChange方法只执行一次file.status===‘uploading‘，走不到‘done‘的原因和解决方法】_antd upload onchange

背景：如下图所示，使用antd的Upload组件实现上传视频和图片，实现自定义的加载中和预览效果。

上传中：(loading状态)

上传完毕：（done状态）

实现文件上传中loading思路： 当文件在上传中会执行onChange的回调，在file.status === 'uploading'时展示loading中，在file.status === 'done'预览文件。

import React, {Component} from 'react'
import {Upload} form 'antd'
export default class UploadFile extends Component {
	state = {
		loading: false,
		fileList: []
	}
	onChange = (info) => {
		const {file: {status}, fileList} = info
		if(status === 'uploading') {
			this.setState({loading: true})
		}
		if(status === 'done') {
			this.setState({loading: false})
		}
	}
	render() {
		const {fileList} = this.state
		return (
			<Upload onChange={this.onChange} fileList={fileList}/>
		)
	}
} 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

以上代码执行时只会执行一次onChange且file.status === 'uploading'，这里调用了this.setState({loading: true}),setState导致组件重新渲染，< Upload />组件重新请求时fileList=[]导致请求中断，即不会再次执行onChange，也就不会走到file.status === 'done' 中。

解决方法：

const {file: {status}, fileList} = info
if(status === 'uploading') {
	this.setState({loading: true, fileList:[...fileList]})
}
1
2
3
4

让Upload组件继续上次的请求。