React ReduxForm img上传和验证

Question

我正在尝试在我的ReduxForm中创建一个img上传器，它只接受.png且不大于210x210和2mb的imgs。此外，设计说将占位符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>
    )
}

目前我不确定在上传img或在句柄提交功能中尝试进行验证是否更好。谢谢你的帮助！