React实现上传功能

功能需求：实现一个弹窗形式的上传表单

1.选择文件后进行手动上传
2.上传文件个数至少1个，至多5个，文件总大小不能超过1G
3.上传中途如果失败，不存在断点续传，全部手动重传
4.任务名称和上传文件为必需选项，若未填写或者未选择时不能提交

分析需求

难点主要在于将表单组件与弹窗组件和上传组件相结合，并且实现定制化的上传需求

组件代码

            

                

                    
                        
                            
                                 选择一个或多个文件
                            
                        
                    
                    
                        
                            提交
                        
                        
                            取消
                        
                    
                
            

关键代码在于upload组件的配置

      const uploadsetting = {
            name: 'file',
            action: Config.flowAnalysisAdd,
            multiple:true,
            onRemove: (file) => {
                this.setState(({ fileList }) => {
                    const index = fileList.indexOf(file);
                    const newFileList = fileList.slice();
                    newFileList.splice(index, 1);
                    return {
                        fileList: newFileList,
                    };
                });
            },
            beforeUpload: (file) => {
                this.setState(({ fileList }) => ({
                    fileList: [...fileList,file],
                }));
                return false;
            },
            fileList:this.state.fileList
        };

将选择文件后的文件列表储存于父组件的state之中，对于文件大小和个数的限制便可以通过操作这个fileList来制定，这点是组件设计的核心

样式定制化

因为本次项目效果图如下，
但react的upload组件中，filelist始终处于上传按钮之下，所以对upload组件进行改造。观察过组件的结构之后，我认为改DOM结构比较复杂而且容易出错，遂另辟蹊径，只是在样式上进行改动，将上传按钮调整到filelist之下。

关键代码如下，

    .ant-upload-select{
        position: absolute;
        left:0px;
        bottom:-30px;
    }