antd中使用Form控件和Upload控件对图片上传并进行验证

最新推荐文章于 2024-05-31 11:27:41 发布

青阳-

最新推荐文章于 2024-05-31 11:27:41 发布

阅读量7.3k

点赞数 1

分类专栏： # React 文章标签： upload 上传文件

本文链接：https://blog.youkuaiyun.com/ThisEqualThis/article/details/103633911

版权

React 专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了如何在React应用中使用Ant Design的Upload组件进行图片上传，并通过Form表单进行有效的数据验证。文章展示了如何利用Form组件的getFieldDecorator方法实现上传图片的必填校验，同时提供了完整的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在进行form提交时需要对Upload控件进行校验，若没有上传图片则进行校验，提示：请上传图片；否则，不进行校验。
使用Form控件绑定Upload上传控件，使用form的api：getFieldDecorator进行数据的双向绑定，并使用rules规则校验。

Upload控件详解

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