针对于“上传文件”和“触发方式” 的解决方案（Antd个例）

修改前：

 封装的组件：

const MyUpload: FC<MyUploadProps> = ({title, prop}) => {
    return (
        <Upload maxCount={1} itemRender={() => null} {...prop} beforeUpload={checkFileSize}>
            <Button type="link" style={{color: title === '重新上传' ? '#080e1a' : ''}}>
                {title}
            </Button>
        </Upload>
    );
};

展示：

return (
        <>
                <Dragger
                    maxCount={1}
                    style={{display: fileUploadStatus.REMOVED === uploadStatus ? 'block' : 'none'}}
                    {...prop}
                    itemRender={() => null}
                    openFileDialogOnClick={false}
                    beforeUpload={checkFileSize}
                >
                    <Upload maxCount={1} itemRender={() => null} {...prop} beforeUpload={checkFileSize}>
                        <div>
                            <p className="ant-upload-drag-icon">
                                <CloudUploadOutlined />
                            </p>
                            <MyUpload prop={prop} title={'点击上传'} />
                        </div>
                    </Upload>
                </Dragger>
        </>
    );
};

解决方法研究：

（ 需求：1.点击 "空白" 和 “点击上传”文字、拖拽都能生效

                2.上传完成后显示“重新上传” 点击后也能生效 ）

=> 0.Dragger 的默认点击空白设置为 false，此时只能生效“拖拽”

=> 1.先去掉本来原本封装的 MyUpload 组件（它会触发两次上传函数--事件冒泡）

=> 2.在原有的 Dragger 组件中 直接嵌套 Upload 组件，再将展示的“标签”结构写入 Upload 中

=> 3.(关键!!!)

        此时需要给标签容器 div 设置 antd 上传组件的class类名（className="ant-upload-drag-main"），将整个内容撑满 Dragger。

(这样便解决了触发“二次”上传函数的回调

=> 本质是：用div内容100%，将点击触发 Upload 函数的范围扩大，

        使点击的范围去代替Dragger点击的空白范围

=> 4.疑问:上传成功后的“重新上传”文字可以实现点击、拖拽，但是“拖拽”必须精准到“文字上面”，

        后面想过在封装的 MyUpload 中使用 title 的属性直接传入整个展示的“标签”结构，

        但是会再次触发“ Upload 上传函数的二次回调，最终优化不下去。

综上:(目前是改动最小，优化最合适的方案)，即使上传成功后的“重新上传”从用户角度考虑，

        99%是以点击触发方式最符合大众习惯，

        如果需要“拖动”也能在上传成功后“整个div中”实现，那就是另外的需求了。

修改后：

.ant-upload-drag-main {
            width: 470px;
            height: 160px;
            display: flex;
            justify-content: center;
            flex-direction: column;
        }

return (
        <>
            <div className={styles.decisionTest}>
                <div className={styles.subTitle}>批量测试文件</div>
                <Form.Item name="url" noStyle>
                    <p />
                </Form.Item>
                <Anchor href="" download="" id="downloadDiv" style={{display: 'none'}} />
                <Dragger
                    maxCount={1}
                    style={{display: fileUploadStatus.REMOVED === uploadStatus ? 'block' : 'none'}}
                    {...prop}
                    itemRender={() => null}
                    openFileDialogOnClick={false}
                    beforeUpload={checkFileSize}
                >
                    <Upload maxCount={1} itemRender={() => null} {...prop} beforeUpload={checkFileSize}>
                        <div className="ant-upload-drag-main">
                            <p className="ant-upload-drag-icon">
                                <CloudUploadOutlined />
                            </p>
                            <div>
                                将文件拖到此处，或 <span style={{color: '#2468f2'}}>点击上传</span>
                            </div>
                            {/* <MyUpload prop={prop} title={'点击上传'} /> */}
                        </div>
                    </Upload>
                </Dragger>

                <div
                    className={styles.uploadBox}
                    style={{
                        display: [fileUploadStatus.DONE, fileUploadStatus.UPLOADING, fileUploadStatus.ERROR].includes(
                            uploadStatus
                        )
                            ? 'flex'
                            : 'none'
                    }}
                >
                    {uploadStatus === fileUploadStatus.UPLOADING ? (
                        <div style={{display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
                            <Progress
                                strokeColor={'#2468f2'}
                                size="small"
                                percent={percent}
                                style={{width: 150}}
                                showInfo={false}
                            />
                            <span>上传中...</span>
                        </div>
                    ) : null}
                    <div
                        style={{
                            display: fileUploadStatus.DONE === uploadStatus ? 'flex' : 'none',
                            flexDirection: 'column',
                            alignItems: 'center',
                            justifyContent: 'center'
                        }}
                    >
                        <div style={{display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
                            <FileWordOutlined />
                            <div>{fileName}</div>
                        </div>
                        <div style={{display: 'flex', flexDirection: 'row'}}>
                            <MyUpload prop={prop} title={'重新上传'} />
                            <Button
                                type="link"
                                style={{color: '#080e1a', marginLeft: 10}}
                                onClick={() => {
                                    onSubmitDisabled && onSubmitDisabled(true);
                                    setUploadStatus(fileUploadStatus.REMOVED);
                                }}
                            >
                                删除
                            </Button>
                        </div>
                    </div>

                    <div
                        style={{
                            display: fileUploadStatus.ERROR === uploadStatus ? 'flex' : 'none',
                            flexDirection: 'column',
                            alignItems: 'center',
                            justifyContent: 'center'
                        }}
                    >
                        <div style={{display: 'flex', flexDirection: 'column'}}>
                            <ReloadOutlined style={{fontSize: 20, color: '#d9d9d9'}} />
                            <MyUpload prop={prop} title={'重新上传'} />
                        </div>
                    </div>
                </div>

                <div>
                    上传文档要求后缀为.xls, .xlsx，大小不超过10M 点此
                    <Button
                        type="link"
                        onClick={() => {
                            fileDownload('/api/file/download', 'TEMPLATE');
                        }}
                    >
                        下载模板文件
                    </Button>
                </div>
            </div>
        </>
    );