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>
)
}
}
