React Antd上传回调没有回调成功或者失败

官方文档说

onChange

上传中、完成、失败都会调用这个函数。

文件状态改变的回调,返回为:

 

{

file: { /* ... */ },

fileList: [ /* ... */ ],

event: { /* ... */ },

}

只有uploading状态,最后每一次重新赋值给fileList后才可以正常回调。

const [fileList, setFileList] = useState<UploadFile[]>([]);
      
    const handleChange: UploadProps['onChange'] = ({ file, fileList }) =>{
        setFileList(fileList)
        if(file.status === 'done'){
             console.log(fileList);
             console.log(file.response.data.url)
        }
    }

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您可以使用antd中的Upload组件和Checkbox.Group组件来实现多选上传功能。首先,您需要引入antd的Upload和Checkbox组件: ```javascript import { Upload, Checkbox } from 'antd'; ``` 然后,您可以在render函数中渲染Upload和Checkbox组件,并将它们包裹在一个Form.Item组件中: ```javascript <Form.Item> <Upload fileList={this.state.fileList} beforeUpload={this.handleBeforeUpload} onChange={this.handleUploadChange} > <Button icon={<UploadOutlined />}>选择文件</Button> </Upload> <Checkbox.Group options={this.state.options} onChange={this.handleCheckboxChange} /> </Form.Item> ``` 在上面的代码中,我们将Upload组件的fileList属性设置为组件状态中的fileList数组,并设置beforeUpload和onChange回调函数来处理上传文件和文件列表的变化。我们还将Checkbox.Group组件的options属性设置为组件状态中的options数组,并设置onChange回调函数来处理多选框的变化。 最后,您需要在组件的状态中定义fileList和options数组,并编写处理上传和多选框变化的回调函数: ```javascript constructor(props) { super(props); this.state = { fileList: [], options: [ { label: '选项1', value: '1' }, { label: '选项2', value: '2' }, { label: '选项3', value: '3' }, ], checkedValues: [], }; } handleBeforeUpload = (file) => { this.setState((state) => ({ fileList: [...state.fileList, file], })); return false; }; handleUploadChange = ({ fileList }) => { this.setState({ fileList }); }; handleCheckboxChange = (checkedValues) => { this.setState({ checkedValues }); }; ``` 在上面的代码中,我们在handleBeforeUpload函数中将上传的文件添加到fileList数组中,并返回false以阻止自动上传。在handleUploadChange函数中,我们更新组件状态中的fileList数组以反映上传文件的变化。在handleCheckboxChange函数中,我们更新组件状态中的checkedValues数组以反映多选框的变化。 希望这可以帮助您实现react antd的多选上传功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值