• 上传文件时的判断


    第一种情况,在点击上传按钮之前有逻辑判断,逻辑判断里面走true的话,点击上传按钮,但是此时上传按钮不能手动点击,这时候需要获取dom节点,触发click

    Modal.confirm({
                title: 'Confirm',
                icon: <ExclamationCircleOutlined />,
                content: '如果需要上传操作流程请先上传操作流程图片后,再回传文件',
                okText: '继续上传',
                cancelText: '取消',
                onOk: () => {
                    console.log(currentRef);
                    currentRef.current.upload.uploader.fileInput.click();
                }
            });

    第二种情况,在打开上传时,选择文件的弹窗,选择文件之后,也就是触发onchange事件时候,判断是否上传,这时候需要用到antd组件的beforeUpload属性做判断

    如果beforeupload里面有异步请求,只需要通过返回的promise结果来判断是否继续上传。如果不能继续弹出提示还好,但是如果产品要求弹出交互弹窗,让用户自己选择,

    这时候就切断了上传流程。解决方式是把file存在存起来,上传的时候创FormData, 使用formData.append('file', files)来手动上传

    beforeUpload = file => {
            const { getOperatorFileIfExist, uploadOperator, onOpenOperator } = this.props
            const isJar = file.type === 'application/java-archive' || file.name?.includes('.jar')
            if (!isJar) {
                message.error('jar包有误,请重新上传')
                return isJar
            }
            this.setState({
                files: file
            })
          
            return new Promise((resolve, reject) => {
                getOperatorFileIfExist({
                    params: {
                        fileName: file.name
                    }
                }).then(res => {
                    const { data } = res
                    const { files } = this.state
                    if (!data) resolve(data)
                    else {
                        dialog.confirm({
                            title: '提示',
                            content: <span>文件名已存在,是否进行覆盖?</span>,
                            ok: () => {
                                const formData = new FormData()
                                formData.append('file', files)
                                uploadOperator({ data: formData }).then(response => {
                                    if (response.statusCode === 200) {
                                        message.success(response.message)
                                        onOpenOperator(response.data)
                                    } else {
                                        message.error('jar包有误,请重新上传')
                                    }
                                })
                                dialog.hide()
                            },
                            cancel: () => {
                                dialog.hide()
                            }
                        })
                        reject()
                    }
                })
            })
        }
  • 相关阅读:
    安装thrift时,注意openssl参数
    Linux下boost编译安装
    super-smack
    算术运算指令
    C/C++中有关字长与平台无关的整数类型
    URLTester2.3.2
    第20课 链接过程简介
    第19课 编译过程简介
    第18课 三目运算符和逗号表达式
    第17课 ++和--操作符分析
  • 原文地址:https://www.cnblogs.com/lhs-fight/p/15405854.html
Copyright © 2020-2023  润新知