reactjs - 尽管给出了 accept 道具，但 Antd 上传者仍接受所有文件

Question

我正在使用 antd 拖放组件https://ant.design/components/upload/#components-upload-demo-drag。在他们给出的示例中，如果我添加道具接受它只接受受限制的格式，而不是在 fileList 中添加其他文件。但是，当我在我的应用程序中使用这个组件时，它会添加各种文件。为什么会发生这种行为以及如何避免它？

              const Uploader = () => {
               const [files, setFiles] = useState([])
               const onChangeHandler = (res) => {
                 setFiles(res.fileList)
              };
              console.log(files)
              return (
                    <Upload.Dragger
                      accept=".pdf,.doc,.docx"
                      onChange={onChangeHandler}
                      showUploadList={false}
                      multiple
                      fileList={files}
                    >
                      Upload
                    </Upload.Dragger>
                 
              );
            };

例如，如果我拖动 png 图像，它不会被添加到 fileList 中，但是如果我手动选择任何文件（不在接受属性中），它会添加到我不想要的状态。有什么帮助吗？

标签： reactjsantd

Answer 1

您可以与道具结合使用beforeUpload（文档中的示例）

例子：

const Uploader = () => {
           const types = ["application/pdf","application/vnd.openxmlformats-officedocument.wordprocessingm","application/msword"];
           const [files, setFiles] = useState([])
           const onChangeHandler = (res) => {                 
                console.log(res);
                let addFiles = true;
                for(let i = 0; i < res.fileList.length; i++) {
                   if (!types.includes(res.fileList[i].type)) {
                     addFiles = false;
                   }
                }
                if( addFiles ) {
                   setFiles(res.fileList);
                }
                console.log(files);
          };
          return (
                <Upload.Dragger
                  accept=".pdf,.doc,.docx"
                  beforeUpload={(file) => {
                     if (!types.includes(file.type)) {
                        message.error(`${file.name} is not a pdf, doc or docx file`);
                        return false;
                     } else {
                       return true
                     }
                  }}
                  onChange={onChangeHandler}
                  showUploadList={false}
                  multiple
                  fileList={files}
                >
                  Upload
                </Upload.Dragger>
             
          );
        };