Javascript React ReduxForm img上传和验证

我正在尝试在我的ReduxForm中创建一个img上传程序，它只接受.png且不大于210x210和2mb的img。此外，设计上说要将占位符img与上传的文件交换，我也在努力解决这个问题。这是我的密码：

renderProfileImgUpload(field) {
    const { meta: { touched, error }, label, name, accept, type } = field;

    return (
        <div>
            <div className="login__fieldError">
                <small>{touched ? error : ''}</small>
            </div>
            <label htmlFor="img-upload">
                <img src="imgs/profile-select.png" className="img-responsive" alt="" />
            </label>
            <input type={type} name={name} accept={accept} id="img-upload" />
        </div>
    )
}

render() {
    const { handleSubmit, showNextRegistration, showPreviousRegistration } = this.props;

    return (
        <div className="widgetFull--white">
            <div className="align-middle row registration--fullHeight">
                <div className="columns small-3">
                    <img
                        src="imgs/account-arrow-left.png"
                        alt="menu"
                        className="img-responsive"
                        onClick={showPreviousRegistration}
                    />
                </div>
                <div className="columns small-6">
                    <h2 className="registration__header">Edit account</h2>
                </div>
                <div className="columns small-3">
                    <h3 className="registration__index">2 of 2</h3>
                </div>

                <form onSubmit={ handleSubmit(this.onSubmit.bind(this)) }>
                    <div className="columns small-3">
                        <Field label="Profile Image" type="file" name="image" accept="image/.png" component={this.renderProfileImgUpload} />
                    </div>
                    <div className="columns small-6">
                        <Field label="Username" type="screenname" name="screenname" component={this.renderUsernameField} />
                    </div>
                    <div className="columns small-6">
                        <Field label="First Name" type="firstName" name="firstName" component={this.renderFirstNameField} />
                    </div>
                    <div className="columns small-6">
                        <Field label="Last Name" type="lastName" name="lastName" component={this.renderLastNameField} />
                    </div>
                    <div className="columns small-12">
                        <button className="button expanded registration__btn" type="button">Next</button>
                    </div>
                </form>

            </div>
        </div>
    )
}

renderProfileImgUpload（字段）{
const{meta:{toucted，error}，label，name，accept，type}=field；
返回(
{触摸？错误：“”
)
}
render（）{
const{handleSubmit，showNextRegistration，showPreviousRegistration}=this.props；
返回(
编辑帐户
第2页，共2页
下一个
)
}

目前，我不确定在上传img时还是在handle submit函数中尝试进行验证更好。谢谢你的帮助