在antd-pro的form中使用Upload组件上传文件

最新推荐文章于 2024-08-13 16:51:37 发布

百岁如流富贵冷灰

最新推荐文章于 2024-08-13 16:51:37 发布

阅读量1.8w

点赞数 13

文章标签： antd react formData文件上传

本文链接：https://blog.csdn.net/qq8241994/article/details/82857730

版权

本文介绍了如何在antd-pro的form中使用Upload组件，通过beforeUpload阻止自动上传，并利用formData将文件信息与其他表单数据一同提交。在Upload组件中添加onRemove方法以实时更新state，并在提交时利用formData.append方法添加数据，实现文件与表单的同步提交。

摘要由CSDN通过智能技术生成

好久没更博客了......这他么活根本干不完我有啥办法啊o(╥﹏╥)o

直接进入正题：

思路：首先，当调用Upload组件的时候每次选择后会自动上传而不会随表单一起提交，这个显然不符合实际需求，所以需要在Upload组件中定义beforeUpload方法并且返回false拦截文件的自动上传，同时把文件信息添加到state中，此时需要考虑到对于上传列表的删除对state的影响，所以需要在Upload组件中添加onRemove方法用于在删除列表时候实时更新state，根据此思路得出的代码如下：

//这个是监听文件变化的
fileChange=(params)=>{
    const {file,fileList}=params;
    if(file.status==='uploading'){
        setTimeout(()=>{
            this.setState({
                percent:fileList.percent    
            })
        },1000)       
    }
}
// 拦截文件上传
beforeUploadHandle=(file)=>{
    this.setState(({fileData})=>({
        fileData:[...fileData,file],
    }))
    return false;
}
// 文件列表的删除
fileRemove=(file)=>{
    this.setState(({fileData})=>{
        const index=fileData.indexOf(fil