React中AntDesign upload组件 自定义请求将多个上传请求合并成一个并

接口文档

核心代码

const ImportPictureUpload = () => {
    const [fileList, setFileList] = useState([])
    const onBeforeUpload = (file: any, fileList: any) => {
        setFileList(fileList)
        return false;
    }
    useEffect(() => {
        if(fileList.length > 0) {
            onCustomRequest().then(r => r)
        }
    }, [fileList]);
 
    const onCustomRequest = async () => {
            const formData = new FormData()
            fileList.map(file => {
                formData.append('files', file)
            })
            formData.append('uploadVersionNo', sessionStorage.getItem('upload-version-no'))
            const res = await KeyManServices.uploadMultiPicture(formData)
            if(res.status === 200) {
                message.success('上传成功')
            }
    }
 
    const props: UploadProps = {
        fileList,
        name: 'files',
        multiple: true,
        showUploadList: false,
        accept: ".png,.jpg,.jpeg",
        beforeUpload: onBeforeUpload,
    };
    return (
        <>
            <Upload {...props}>
                <Button icon={''} className="shared-colorful-btn">照片导入{fileList.length}</Button>
            </Upload>
        </>
    )
}
 
export default ImportPictureUpload;
 
 

请求示例

var formdata = new FormData();
formdata.append("files", fileInput.files[0], "C:\Users\fuhanchao\Desktop\xxx.txt");
formdata.append("files", fileInput.files[0], "C:\Users\fuhanchao\Desktop\xxx.xlsx");
formdata.append("files", fileInput.files[0], "C:\Users\fuhanchao\Desktop\xxx.xlsx");
formdata.append("uploadVersionNo", "111");