上传文件时的判断

第一种情况,在点击上传按钮之前有逻辑判断,逻辑判断里面走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()
                }
            })
        })
    }

 

posted @ 2021-10-14 11:19  二双  阅读(486)  评论(0编辑  收藏  举报