在进行form提交时需要对Upload控件进行校验,若没有上传图片则进行校验,提示:请上传图片;否则,不进行校验。
使用Form控件绑定Upload上传控件,使用form的api:getFieldDecorator进行数据的双向绑定,并使用rules规则校验。
import React, { PureComponent } from 'react';
import { Row, Col, Form, Upload, Modal } from 'antd';
import { connect } from 'dva';
import { local } from '@/utils/utils';
const token = local.fetch('token');
const FormItem = Form.Item;
@connect(state => {
return {
list: state.list
};
})
@Form.create()
export default class Contract extends PureComponent {
state = {
previewVisible: false,
fileList: [],
previewImage: ''
};
handlePreviewImg = file => {
this.setState({
previewImage: file.url || file.thumbUrl,
previewVisible: true,
});
};
handleCancelImg = () => {
this.setState({ previewVisible: false });
}
render() {
const {
visible,
form: { getFieldDecorator, setFieldsValue }
} = this.props;
const {
previewImage,
fileList,
previewVisible
} = this.state;
const propsUploadType = {
name: 'files', //发到后台的文件参数名
action: '/oraflfile/upload', //上传的地址
accept: '.png,.jpg,.jpeg', //接受上传的文件类型
method: 'post', //上传请求的 http method,默认post
listType: 'picture-card', //上传列表的内建样式
headers: { //设置上传的请求头部,IE10 以上有效
Authorization: `Bearer ${token}`,
},
data: {}, //上传所需额外参数或返回上传额外参数的方法
onChange(info){ //上传文件改变时的状态
const {
file, //当前操作的文件对象。
fileList, //当前的文件列表
even //上传中的服务端响应内容,包含了上传进度等信息,高级浏览器支持
} = info;
this.setState({ fileList }, () => {
this.setState({ fileList: [...this.state.fileList] });
});
if (file.status === 'done') {
message.success(`${file.name}文件上传成功`);
setFieldsValue({ 'uploadImage': file.name }); //设置上传一张图片后就不进行校验
}
if (file.status === 'error') {
message.error(`${file.name}文件上传失败`);
}
}
};
const uploadButton = (
<div>
<Icon type='plus' />
<div>上传</div>
</div>
);
return (
<Form hideRequiredMark labelAlign='right'>
<Row gutter={{ md: 4, lg: 12, xl: 24 }}>
<Col md={24} sm={24}>
<FormItem label={'上传图片'}>
{getFieldDecorator('uploadImage', {
rules: [
{
required: true,
message: '请上传图片'
}
]
})(
<>
<Upload
{...propsUploadType}
fileList={fileList} //已经上传的文件列表(受控)
onPreview={this.handlePreviewImg} //点击文件链接或预览图标时的回调
>
{fileList.length > 2 ? null : uploadButton}
</Upload>
<Modal
visible={previewVisible}
footer={null}
onCancel={this.handleCancelImg}
>
<img alt='example' style={{ width: '100%' }} src={previewImage} />
</Modal>
</>
)}
</FormItem>
</Col>
</Row>
</Form>
)
}
}