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

好久没更博客了......这他么活根本干不完我有啥办法啊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 {
           fileData:newFileList
        }
    })
}
.
.
.
.
render(){
    <FormItem labelCol={{span:5}} wrapperCol={{span:15}} label='文件上传'>
        {getFieldDecorator(form,settings,formName,'name',values)(
            <Upload action='路径' beforUpload={this.beforeUploadHandle} onChange={this.fileChange} onRemove={this.fileRemove} fileList={this.state.fileData}>
                <Button><Icon type='upload' />上传文件</Button>
            </Upload>
        )}
    </FormItem>
}

到这个时候关于文件处理的部分已经基本完成，接下来就是讲文件信息和其他表单信息一起提交，这个时候需要用到formData()；通过append方法将数据逐条添加到formData中（tips:formData数据在console后只有一个空的对象，但是数据都在里面，要想获取数据需要调用formData.get()方法）；此部分的代码为：

const {fileData}=this.state;
const formData=new formData();

fileData.forEach((file)=>{
    formData.append('files',file);
})
// fields为表单其他项的数据,在antd-pro中是fileds.f
Object.keys(fields).map((item)=>{
    formData.append(item,fields[item]);
})

this.props.dispatch({
    type:'pluginInfo/upload',
    payload:formData,
    callback:()=>{
        resetFields();
        this.setState({
            fileData:[],
        })
        this.props.handleModalVisible(false)//这个是项目中的关闭弹窗方法，可以无视
    }
})

到了此时你的表单数据以及文件信息已经全部发送给了后台

结语：那个拦截文件上传的你可以在antd的官网中看到完整的例子，因为代码在公司的内网上，这些代码都是自己一个一个码出来的，如果对各位有帮助的话，麻烦点个赞支持一下，谢谢了。(*^▽^*)

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

猜你喜欢