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