React实现上传功能

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

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

分析需求

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

组件代码

            <Modal
                visible={visible}
                title="创建分析任务"
                onCancel={onCancel}
                refreshList={refreshList}
                footer={null}
                key={key}
                className="black-modal"
            >

                <Form onSubmit={this.handleSubmit.bind(this)} >
                    <FormItem
                        {...formItemLayout}
                        label="上传文件："
                        className="upload-con"
                    >
                        <Upload {...uploadsetting} >
                            <Button type="primary" >
                                <Icon type="file" /> 选择一个或多个文件
                            </Button>
                        </Upload>
                    </FormItem>
                    <FormItem style={{marginTop:"50px"}}
                    >
                        <Button htmlType="submit" type="primary">
                            提交
                        </Button>
                        <Button onClick={onCancel}>
                            取消
                        </Button>
                    </FormItem>
                </Form>
            </Modal>

关键代码在于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;
    }