zoukankan      html  css  js  c++  java
  • 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>
        )
      }
    }
  • 相关阅读:
    linux 常用快捷键
    命令行远程链接
    mybatis参数错误 Parameter '×××' not found. Available parameters are [0, 1, param1, param2]
    mybatis延迟加载
    mybatis跨XML引用
    eclipse修改项目名称
    wait, WIFEXITED, WEXITSTATUS
    进程通信中如何进行值得传递?
    fork新建进程
    Ubuntu安装genymotion模拟器步骤
  • 原文地址:https://www.cnblogs.com/LC123456/p/12912852.html
Copyright © 2011-2022 走看看