- 用ant.design写了一个表单发现上传组件的请求总是被莫名中断,导致图片无法上传。
- 调试后发现组件的setSteta({ loading: true })方法导致了组件的unmount,导致了请求的abort
- 组件的状态在监听的upload的onchange事件,注释掉onchange事件,问题得以解决
- 但是不能再onchange里面改变状态(或者使用redux等状态管理时触发一个action),明显不太合理
- 代码如下(其实就是按照官网给的列子写的:https://ant.design/components...),在线demo:https://codesandbox.io/s/wopv...:
import React from 'react';
import ReactDOM from 'react-dom';
import { Upload, Form, Icon } from 'antd';
function getBase64(img, callback) {
const reader = new FileReader();
reader.addEventListener('load', () => callback(reader.result));
reader.readAsDataURL(img);
}
class AddBookForm extends React.Component {
state = {
loading: false,
};
handleChange = (info) => {
console.log(info)
if (info.file.status === 'uploading') {
this.setState({ loading: true });
return;
}
if (info.file.status === 'done') {
// Get this url from response in real world.
getBase64(info.file.originFileObj, imageUrl => this.setState({
imageUrl,
loading: false,
}));
}
}
render() {
const formItemLayout = { labelCol: { xs: 24, sm: 2 }, wrapperCol: { xs: 24, sm: 8 } };
const FormItem = function(props) {
return <Form.Item {...formItemLayout} {...props}></Form.Item>;
};
const uploadButton = (
<div>
<Icon type={this.state.loading ? 'loading' : 'plus'} />
<div className="ant-upload-text">Upload</div>
</div>
);
const imageUrl = this.state.imageUrl;
return (
<Form layout="horizontal">
<FormItem label="图片" extra="请上传2M以内的JPG图片">
<Upload
name='imageFile'
action="/api/image-upload"
onChange={this.handleChange}
showUploadList={false}
listType="picture-card"
className="single-image-uploader"
>
{imageUrl ? <img src={imageUrl} alt="" /> : uploadButton}
</Upload>
</FormItem>
</Form>
);
}
}
ReactDOM.render((
<AddBookForm />
), document.getElementById('root'));
这个问题已经困扰了我非常久的时间,请各位大神指导一下如何解决这个问题。
每一次onChange都要执行setState。
参考