Ant 设计在上传整个文件夹时仅显示允许的项目答案

【问题标题】：Ant design to display only allowed items when uploading entire folderAnt 设计在上传整个文件夹时仅显示允许的项目
【发布时间】：2020-11-10 03:45:28
【问题描述】：

我正在尝试使用 ant 设计库中的 Dragger 组件上传整个文件夹，但我不确定如何仅将允许的项目显示为向用户显示的最终列表的一部分.根据下面的屏幕截图，可以看到我的不允许文件 stats.js 显示为红色，表示发生了错误，但最好是它不存在，这样用户就不必删除它，但我还没有找到实现这一目标的方法。

import React, {useState} from 'react';
import 'antd/dist/antd.css';
import {Upload, message} from 'antd';
import {InboxOutlined} from '@ant-design/icons';

const {Dragger} = Upload;

function FileUpload(props) {

const allowedFiles = ["stats.json", "index.html"];

const config = {
    name: 'file',
    directory: true,
    onChange(info) {
        const {status} = info.file;
        if (status !== 'uploading') {
            console.log(info.file, info.fileList);
        }
        if (status === 'done') {
            props.onFileAdded(info.fileList)
        } else if (status === 'error') {
            message.error(`${info.file.name} file upload failed.`);
        }
    },
    beforeUpload: file => {
        if (allowedFiles.includes(file.name)) {
            return false;
        }
    },

};

return (
    <div>
        <Dragger {...config}>
            <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.
            </p>
        </Dragger>
    </div>
);

}

export default FileUpload;

非常感谢。

【问题讨论】：

标签： javascript reactjs file-upload antd

【解决方案1】：

您可以尝试将accept 道具添加到Dragger 组件。

Exp: 如果只允许图片文件

accept: 'images/*'

【讨论】：

您好，感谢您的回复。恐怕我以前用accept: allowedFiles 尝试过，但它不起作用。我已经用这篇文章更新了这个问题。
或者您可以按状态控制文件。在 Dragger 组件中使用 fileList 属性。在beforeUpdate函数内部添加过滤函数，并将过滤后的文件设置为状态并传递给fileList。
谢谢。是的，这行得通。我会把我的代码贴在这里以供参考。

【解决方案2】：

根据 Desmond 的评论 here，使用通过状态管理的列表对我有用。

const allowedFiles = ["stats.json", "index.html"];
const [list, setList] = useState([])

const config = {
    name: 'file',
    directory: true,
    fileList: list,
    onChange(info) {
        const {status} = info.file;
        if (status !== 'uploading') {
            console.log(info.file, info.fileList);
        }
        if (status === 'done') {
            props.onFileAdded(info.fileList)
        } else if (status === 'error') {
            message.error(`${info.file.name} file upload failed.`);
        }
    },
    beforeUpload: file => {
        if (allowedFiles.includes(file.name)) {
            setList(prev => [...prev, file])
            return false;
        }
    },

};

【讨论】：