ant-design-vue/components/vc-form/demo/file-input.js

/* 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>
    );
  },
};