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

最新推荐文章于 2025-06-26 12:09:48 发布

百岁如流富贵冷灰

最新推荐文章于 2025-06-26 12:09:48 发布

阅读量1.8w

点赞数 13

CC 4.0 BY-SA版权

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

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

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

好久没更博客了......这他么活根本干不完我有啥办法啊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(file);
        const newFileList=fileData.slice();
        newFileList=splice(index,1);
        return {