Ant design 文件上传拖拽无法正常工作

Question

我在我的项目中使用 Ant 设计。对于文件上传，我使用 Ant Design 的 Dragger。

问题是，当我设置 multiple = false 和 maxCount = 1 时，我可以拖动多个文件。虽然它只随机上传 1 个文件，但在我的场景中，当我拖动多个文件时，我需要显示一条警告，指出不允许多个文件上传。

我尝试在 onDrop 方法中设置一个值，我想在 beforeUpload 方法中使用该值。但似乎 beforeUpload 在 onDrop 之前被调用。所以这样是不可能的。

我尝试了这些但没有用：https://github.com/ant-design/ant-design/issues/17397

这是我的拖动器代码

const [droppedFile, setDroppedFile] = useState(0);
    const uploadData = {
        name: 'file',
        multiple: false,
        maxCount: 1,
        accept: 'text/csv,application/vnd.ms-excel',
        action: BASEURL + '/campaign/csv',
        data: {
            campaign: props.id
        },
        headers: {
            Authorization: "Bearer " + props.token
        },
        beforeUpload: file => {
            console.log(file);
            if (droppedFile > 1) {
                message.warning(`Multiple files are not allowed. Only one CSV file will be uploaded at a time.`);
                return false;
            }
            if (file.type != 'text/csv'
                && file.type != 'application/vnd.ms-excel') {
                message.error(`Invalid file format. Please upload a CSV file.`);
                return false;
            }
            return true;
        },
        onChange(info) {
            const { status } = info.file;
            if (status !== 'uploading') {
                console.log('uploading',info);
            }
            if (status === 'done') {
                // message.success(`${info.file.name} file uploaded successfully.`);
                console.log("uploaded file", info);
                if (info.file.response == 0) {
                    emptyData()
                }
                setData(info.file.response)
            } else if (status === 'error'
                || (info.file.type != 'text/csv'
                    && info.file.type != 'application/vnd.ms-excel')
            ) {
                console.log(info);
                // message.error(`${info.file.name} file upload failed.`);
                if (info.file.response.message == 'Not Found Exception') {
                    message.error(`No valid LinkedIn profile found`);
                } else {
                    message.error(`Invalid file format. Please upload a CSV file.`);
                }
            }
        },
        onDrop(e) {
            console.log('Dropped files', e.dataTransfer.files);
            // beforeUpload(e.dataTransfer.files)
            setDroppedFile(e.dataTransfer.files.length)
            if (e.dataTransfer.files.length > 1) {
                let validFile = false;
                for (let i = 0; i < e.dataTransfer.files.length; i++) {
                    if (e.dataTransfer.files[i].type == 'text/csv' || e.dataTransfer.files[i].type == 'application/vnd.ms-excel') {
                        validFile = true;
                        break;
                    }
                }
                if (!validFile) {
                    // message.error(`Invalid file format. Please upload a CSV file.`);
                    message.error(`Multiple files are not allowed. Upload only one file at a time.`);
                    // message.error(`${info.file.name} file upload failed.`);
                } else {
                    message.warning(`Multiple files are not allowed. Only one CSV file will be uploaded at a time.`);
                }
            } else {
                if (e.dataTransfer.files[0].type != 'text/csv' && e.dataTransfer.files[0].type != 'application/vnd.ms-excel') {
                    message.error(`Invalid file format. Please upload a CSV file.`);
                }
            }
        },
    };

这是 html 部分

<Dragger {...uploadData}>
                                            <p className="ant-upload-drag-icon">
                                                <InboxOutlined />
                                            </p>
                                            <p className="ant-upload-text">Click or drag file to this area to upload</p>
                                            <p className="ant-upload-hint">
                                                Support for a single or bulk upload. Strictly prohibit from uploading company data or other
                                                band files
                                            </p>
                                        </Dragger>

Answer 1

我也遇到了这个问题，为了显示设计中的错误，我必须使组件完全受控。您可以控制此组件，在 onChange 方法中返回 fileList，检查其长度并在单独的方法中发送数据，而不是通过 AntD 组件

在beforeupload中每次获取一个文件而不是数组，分别验证其类型和大小