mirror of
https://gitee.com/ant-design-vue/ant-design-vue.git
synced 2024-12-15 01:11:53 +08:00
86 lines
1.8 KiB
JavaScript
86 lines
1.8 KiB
JavaScript
/* eslint react/no-multi-comp:0, no-console:0 */
|
|
|
|
import { createForm } from '../index';
|
|
import { regionStyle, errorStyle } from './styles';
|
|
|
|
function getFileValueProps(value) {
|
|
if (value && value.target) {
|
|
return {
|
|
value: value.target.value,
|
|
};
|
|
}
|
|
return {
|
|
value,
|
|
};
|
|
}
|
|
|
|
function getValueFromFileEvent({ target }) {
|
|
return {
|
|
target,
|
|
};
|
|
}
|
|
|
|
const Form = {
|
|
props: {
|
|
form: Object,
|
|
},
|
|
methods: {
|
|
onSubmit(e) {
|
|
e.preventDefault();
|
|
this.form.validateFields((error, values) => {
|
|
console.log(error, values);
|
|
if (!error) {
|
|
console.log('校验通过');
|
|
}
|
|
});
|
|
},
|
|
checkSize(rule, value, callback) {
|
|
if (value && value.target) {
|
|
const files = value.target.files;
|
|
if (files[0]) {
|
|
callback(files[0].size > 1000000 ? 'file size must be less than 1M' : undefined);
|
|
} else {
|
|
callback();
|
|
}
|
|
} else {
|
|
callback();
|
|
}
|
|
},
|
|
},
|
|
|
|
render() {
|
|
const { getFieldProps, getFieldError } = this.form;
|
|
const errors = getFieldError('attachment');
|
|
return (
|
|
<div style={regionStyle}>
|
|
<div>attachment:</div>
|
|
<div>
|
|
<input
|
|
type="file"
|
|
{...getFieldProps('attachment', {
|
|
getValueProps: getFileValueProps,
|
|
getValueFromEvent: getValueFromFileEvent,
|
|
rules: [this.checkSize],
|
|
})}
|
|
/>
|
|
</div>
|
|
<div style={errorStyle}>{errors ? errors.join(',') : null}</div>
|
|
<button onClick={this.onSubmit}>submit</button>
|
|
</div>
|
|
);
|
|
},
|
|
};
|
|
|
|
const NewForm = createForm()(Form);
|
|
|
|
export default {
|
|
render() {
|
|
return (
|
|
<div>
|
|
<h2>input[type="file"]</h2>
|
|
<NewForm />
|
|
</div>
|
|
);
|
|
},
|
|
};
|