Javascript Ant设计在上载整个文件夹时仅显示允许的项目

我试图使用ant design库中的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;

import React，{useState}来自“React”；
导入“antd/dist/antd.css”；
从“antd”导入{Upload，message}；
从“@ant design/icons”导入{InboxOutlined}”；
const{Dragger}=上传；
功能文件上传（道具）{
const allowedFiles=[“stats.json”，“index.html”]；
常量配置={
名称：'文件'，
目录：true，
onChange（信息）{
const{status}=info.file；
如果（状态！=“正在上载”）{
log（info.file，info.fileList）；
}
如果（状态==“完成”）{
未引导的道具（信息文件列表）
}否则如果（状态=='error'）{
message.error（`${info.file.name}文件上载失败。`）；
}
},
上传前：文件=>{
if（allowedFiles.includes（file.name））{
返回false；
}
},
};
返回(


单击或拖动文件到此区域进行上载

支持单个或批量上传。

);
}
导出默认文件上传；

---

非常感谢。

您可以尝试向

Dragger

组件添加

accept

道具

Exp：如果只允许图像文件

accept: 'images/*'

---

根据Desmond的评论，使用一个通过各州管理的列表对我来说是有效的

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;
        }
    },

};

---

嗨，谢谢你的回复。恐怕我以前用过

accept:allowedFiles

，但它不起作用。我用这篇文章更新了问题。或者你可以按州控制文件。使用Dragger组件中的

fileList

属性。在

beforeUpdate

函数中添加一个过滤函数，将过滤后的文件设置为状态并传递到

fileList

。谢谢。是的，成功了。我将把我的代码粘贴到这里以供参考。