react里面的upload上传及上传格式操作

import React from 'react'
import {
  Form,
  Button,
  Upload,
  Icon,
  message,
} from 'antd'

export default @Form.create({
  onValuesChange(_, values) {
    console.log(values, 1)
  }
})
class Home extends React.Component {
  handleSubmit = e => {
    e.preventDefault()
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log(values, 3)
      }
    })
  }

  onBeforeUpload = ({ type }) => {
    if (type !== 'image/png') {
      message.warning('格式不对')
      return false
    }
  }

  normFile = e => {
    if (e.file.type !== 'image/png') return false
    if (Array.isArray(e)) return e
    return e && e.fileList
  }

  render() {
    const { getFieldDecorator } = this.props.form
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
    }
    return (
      <Form {...formItemLayout} onSubmit={this.handleSubmit}>
        <Form.Item label="Upload">
          {getFieldDecorator('upload', {
            valuePropName: 'fileList',
            getValueFromEvent: this.normFile,
          })(
            <Upload
              name="logo" 
              action="https://www.mocky.io/v2/5cc8019d300000980a055e76" 
              listType="picture"
              beforeUpload={this.onBeforeUpload}
            >
              <Button>
                <Icon type="upload" /> Click to upload
              </Button>
            </Upload>,
          )}
        </Form.Item>

        <Form.Item wrapperCol={{ span: 12, offset: 6 }}>
          <Button type="primary" htmlType="submit">
            Submit
          </Button>
        </Form.Item>
      </Form>
    )
  }
}
posted @ 2020-05-18 20:42  帅气的骑士  阅读(3691)  评论(0编辑  收藏  举报