Antd的From组件使用总结

1 常用属性的总结

2 上传文件的总结

2.1 如何上传Form表单中的所有内容

<Form onSubmit={this.handleSubmit} encType="multipart/form-data">      
           <FormItem 
                {...formItemLayout} 
                label={(
                    <span>
                    用户名&nbsp;
                    <Tooltip title="登录账号（6~12位:包含字母和数字下划线）">
                        <Icon type="question-circle-o" />
                    </Tooltip>
                    </span>
                )}>
                    {getFieldDecorator('account', {
                        rules: [{
                            required: true, message: '请输入6~12用户名(包含字母和数字下划线)', whitespace:true,
                            max:12,min:6,pattern:'^[0-9a-zA-Z_]{1,}$'
                        }]},
                    )(
                        <Input />
                    )}
                </FormItem>
               <FormItem
                    {...formItemLayout}
                    label={(
                        <span>
                        上传头像&nbsp;
                        <Tooltip title="请上传本人证件照，用于会员基本资料信息">
                            <Icon type="question-circle-o" />
                        </Tooltip>
                        </span>
                    )}>
                    {getFieldDecorator('upload', {
                        rules: [{ required: true, message: '请上传本人证件照'}],
                    })(
                        <Upload {...uploadProps}>
                            <Button>
                                <Icon type="upload"/> Select File
                            </Button>
                        </Upload>
                    )}
                </FormItem>            
      .......
<Form>

 handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (!err) {  
                console.log("values",values)     
                const formData = new FormData();  
                formData.append("account",values.account);
                formData.append("passwords",values.passwords);
                formData.append("name",values.name);
                formData.append("idCard",values.idCard);
                formData.append("email",values.email);
                formData.append("company",values.company);
                formData.append("phone",values.phone);
                formData.append("education",values.education);
                formData.append("jobTitle",values.jobTitle);
                formData.append('pic',values.upload.file,values.upload.file.name);
                formData.append("appendix",values.dropbox.file,values.dropbox.file.name);
                axios.post(TEMP_SERVER_URL + "member/uploadAvatorPic", formData).then( res => {
                    if(res.data.Result === 'success'){
                        this.props.form.resetFields()
                    }
                }).catch( err => console.log(err))
            }
        });
    }

2.2 如何取消控件的自动上传

http://localhost:8083/pic/e5d818cb-4db7-4120-b71a-8725d68330fe.PNG