antd upload手动上传_antd upload和form结合使用

本文档介绍了如何在antd中使用Upload组件进行手动上传,并结合Form组件实现表单提交。关键在于覆盖Upload的customRequest方法来自定义上传逻辑,以及在Form中配置getFieldDecorator来捕获文件数据。
摘要由CSDN通过智能技术生成

做了个antd的上传简单封装,很烦。主要用的方法就是使用customRequest 这个覆盖上传组件的默认上传,实现自定义上传。有的地方可能比较low 因为我不知道其他方法。。

import React from 'react'

import { Icon, Button, Upload } from 'antd';

import { uploadimg } from '../../api/login' // 封装的上传路径

export default class FileUpload extends React.Component {

constructor(props) {

super(props)

this.state = {

fileList: []

}

this.removeFile = this.removeFile.bind(this)

}

removeFile(file){

console.log(file)

this.state.fileList.map((v,i)=>{

if(file.uid === v.uid){

this.state.fileList.splice(i,1)

this.setState({fileList:this.state.fileList})

this.props.onChange(this.state.fileList)

}

})

}

customRequest = (option) => {

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Ant Design是一个非常流行的UI框架,其提供了许多非常方便的组件来构建UI界面。其包括FormUpload组件,下面是它们的使用方法。 ## Form Form组件用于创建表单,可以非常方便地实现表单的数据绑定、验证和提交等功能。 ```javascript import { Form, Input, Button } from 'antd'; const layout = { labelCol: { span: 8 }, wrapperCol: { span: 16 }, }; const tailLayout = { wrapperCol: { offset: 8, span: 16 }, }; const Demo = () => { const onFinish = (values) => { console.log('Success:', values); }; const onFinishFailed = (errorInfo) => { console.log('Failed:', errorInfo); }; return ( <Form {...layout} name="basic" initialValues={{ remember: true }} onFinish={onFinish} onFinishFailed={onFinishFailed} > <Form.Item label="Username" name="username" rules={[{ required: true, message: 'Please input your username!' }]} > <Input /> </Form.Item> <Form.Item label="Password" name="password" rules={[{ required: true, message: 'Please input your password!' }]} > <Input.Password /> </Form.Item> <Form.Item {...tailLayout}> <Button type="primary" htmlType="submit"> Submit </Button> </Form.Item> </Form> ); }; ``` ## Upload Upload组件用于实现文件上传功能。它支持文件上传、多文件上传、拖拽上传等功能。 ```javascript import { Upload, message } from 'antd'; import { InboxOutlined } from '@ant-design/icons'; const { Dragger } = Upload; const Demo = () => { const props = { name: 'file', multiple: true, action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76', onChange(info) { const { status } = info.file; if (status !== 'uploading') { console.log(info.file, info.fileList); } if (status === 'done') { message.success(`${info.file.name} file uploaded successfully.`); } else if (status === 'error') { message.error(`${info.file.name} file upload failed.`); } }, }; return ( <div> <Dragger {...props}> <p className="ant-upload-drag-icon"> <InboxOutlined /> </p> <p className="ant-upload-text">Click or drag file to this area to upload</p> <p className="ant-upload-hint">Support for a single or bulk upload.</p> </Dragger> </div> ); }; ``` 上面是FormUpload组件的简单使用方法,你可以根据自己的需求对它们进行更详细的配置和使用
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值