ANTD文件上传验证在ReactJ中

Question

我使用 antd design ，它使文件上传良好。

<Upload {...props}>
  <Button icon={<UploadOutlined />}>Upload png only</Button>
</Upload>

在这里，我有一个 toferplaod 函数，它的代码看起来

const beforeUpload = (file) => {
  const isPNG = file.type === "image/png";
  if (!isPNG) {
    message.error(`${file.name} is not a png file`);
  }
  // return Upload.LIST_IGNORE; (This will work in newer version but I am using older one which is 4.9.4.
}

像我在上述代码中提到的那样，如果上传的映像不是png，则它将从当前列表中删除一个上载，因为我们使用 upload.list_ignore ，但不幸的是，我正在版本4.9.4 中工作，并且没有任何这样的关键字可以从列表中删除无效的上传。

您能帮助我从版本4.9.4的列表中删除上传的无效项目吗？

工作示例：

a>

结果：

尝试过一些尝试后，我阻止了文件在列表中显示在列表中，如果该文件不有效，但不幸的是，上传文件的删除现在不起作用（之前正常工作当前的实现）。

Answer 1

我能够通过实现 onRemove 处理程序来删除选定/上传的文件。

示例：

const Uploader = () => {
  const [fileList, setFileList] = useState<UploadFile[]>([]);

  const validateFileType = (
    { type, name }: UploadFile,
    allowedTypes?: string
  ) => {
    if (!allowedTypes) {
      return true;
    }

    if (type) {
      return allowedTypes.includes(type);
    }
  };

  const uploadProps = useMemo(
    () => ({
      beforeUpload: (file: UploadFile) => {
        const isAllowedType = validateFileType(file, "image/png");
        if (!isAllowedType) {
          setFileList((state) => [...state]);
          message.error(`${file.name} is not PNG file`);
          return false;
        }
        setFileList((state) => [...state, file]);
        return false;
      },
      onRemove: (file: UploadFile) => {
        if (fileList.some((item) => item.uid === file.uid)) {
          setFileList((fileList) =>
            fileList.filter((item) => item.uid !== file.uid)
          );
          return true;
        }
        return false;
      }
    }),
    [fileList]
  );

  return (
    <Upload multiple {...uploadProps} fileList={fileList}>
      <Button icon={<UploadOutlined />}>Upload png only</Button>
    </Upload>
  );
};

in-reaCtjs“>

Answer 2

您可以创建一个状态＆amp;控制filelist。在新版本中，我们可以使用upload.list_ignore，但可以查看 api段。如果您不想上传文件，则可以简单地返回false或使用Promise，可以使用 recond（false）拒绝。

在上传组件的API部分中查看 the upload 。
https://ant.design/components/upload/upload/#api

import { useState } from 'react';
import { Upload, Button, message, UploadProps } from 'antd';
import { UploadOutlined } from '@ant-design/icons';

function App() {
    const [fileList, setFileList] = useState([]);
    const [mode, setMode] = useState(false);

    const uploadProps = {
        multiple: mode,
        fileList,
        beforeUpload: (file, filesArray) => {
            let count = 0;
            let files = filesArray.filter((file) => {
                const isPNG = file.type === 'image/png';
                !isPNG && count++;
                return isPNG;
            });

            if (count > 0) {
                setFileList([]);
                message.error(`${count} Files Not Uploaded. Please Upload PNG File/s`);
                return false;
            }

            // If Mode Is Multiple, Simply Store All Files
            if (mode) {
                setFileList(files);
            } else {
                setFileList((prev) => {
                    let newFiles = [...prev];
                    newFiles.push(file);
                    return newFiles;
                });
            }
            return true;

            // Using Promise
            // return new Promise((resolve, reject) => {
            //  // If Not PNG, Reject The Promise
            //  if (!isPNG) return reject(false);

            //  // Else Set The FileList & Send The File
            //  setFileList([file]);
            //  resolve(file);
            // });
        },
        onRemove: (file) => {
            setFileList((prev) => prev.filter((f) => f.uid !== file.uid));
        }
    };

    console.log(fileList);

    return (
        <div style={{ display: 'flex', flexDirection: 'column' }}>
            <div style={{ marginBottom: '10px' }}>
                <Button type='primary' onClick={() => setMode((prev) => !prev)}>
                    Toggle Mode
                </Button>
            </div>
            <Upload {...uploadProps}>
                <Button icon={<UploadOutlined />}>Upload png only</Button>
            </Upload>
        </div>
    );
}

export default App;

https://i.sstatic.net/lzgbm.png“ rel =“ nofollow noreferrer”>

希望这能解决您的问题