如何刪除文件上傳中的錯誤消息？

Question

我正在使用antd design上傳文件，這里我們只允許用戶上傳JPEG圖片。

在這里，我們設置了最多只能上傳3張JPEG圖片的規則。

rules={[
          { required: true },
          { max: 3, message: "Only 3 attachments are allowed", type: "array" }
        ]}

問題：

這里當我們上傳 3 個JPEG文件時，就可以了。

如果我們將第 4 個文件上傳為JPEG ，則顯示錯誤也沒有問題。

但是當我們上傳第 4 個文件作為無效文件時，錯誤仍然顯示哪個不正確。

重現步驟：

-> 上傳 3 個JPEG文件，

-> 上傳不是 JPEG的另一種格式的第 4 個文件。

如果您觀察結果，上傳的文件將在 UI 中被忽略，但我們仍然會看到錯誤消息Only 3 attachments are allowed 。

請參閱上圖以獲得更好的表示。 將第 4 個文件上傳為.html格式，因此在模式彈出窗口中出現錯誤，這是正確的，但規則錯誤消息（在最后一個文件后的文本中）仍然顯示，即使 UI 中只有 3 個文件。

工作沙箱：

我看到問題可能來自第46 - 51行，其中有，

  const normFile = (e: any) => {
    if (Array.isArray(e)) {
      return e;
    }
    return e && e.fileList;
  };

上面的行返回隱藏的上傳文件，即使它超過了限制。

請幫助我解決上述問題，因為我被困了很長時間，非常感謝。

Answer 1

問題是，即使您在 UI 中看到三個文件，但錯誤出現在文件下方，因為您使用的是 antd 表單和任何用 <Form.Item> 包裝並具有name屬性的東西，它由 antd 表單控制。 通過將fileList state 傳遞給上傳組件，這並不意味着您正在控制 fileList 並且您正好有 3 個文件。 為了證明這一點，讓我舉個例子：

1.上傳 3 個 jpeg 文件並使用form.getFieldValue('attachment')獲取附件的值。 預期結果：包含 3 個文件的數組，文件下方無錯誤

2.再上傳一個 jpeg 或任何文件，並使用form.getFieldValue('attachment')檢查附件值預期結果：一個長度為 4 的文件數組，根據您的說法，它應該是數組中的3 files 。 也是一個不會消失的錯誤。

您的代碼中有兩個問題。
問題 1：如您所說，如果您在上傳 3 個 jpeg 文件后上傳 4 個 jpeg 文件，我仍然會在 UI 中看到 4 個文件。
解決方案：如果 fileList 已經有 3 個文件，則不要在 fileList 中添加更多文件。 在 beforeUpload 中，替換setFileList((prev) => [...prev, file]); 使用以下代碼：

setFileList((prev) => {
    if (prev.length < 3) {
        return [...prev, file];
    }
    return prev;
});

第二個問題：即使您在 UI 中有 3 個文件，錯誤也不會消失。
解決方案：可以使用onChange Function。可以檢查info.fileList的長度是否大於3，然后將表單附件值替換為原始fileList即可。 我設置了一個超時來顯示你可以上傳 3 個附件的錯誤，並在 2 秒后刪除錯誤消息。

onChange: (info) => {
    if (info.fileList.length > 3) {
        setTimeout(() => form.setFieldsValue({ attachment: fileList as any }), 2000);
    }
}

希望這能解決您的問題。

完整代碼

import { useState, useMemo } from 'react';
import { Upload, Button, message, Form } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import { UploadFile, UploadProps } from 'antd/lib/upload/interface';
import { RcFile } from 'rc-upload/lib/interface';

interface FormRule {
    title: string;
    attachment?: { file: RcFile; fileList: RcFile[] };
}

const Uploader = () => {
    const [fileList, setFileList] = useState<UploadFile<any>[]>([]);
    const [form] = Form.useForm<FormRule>();

    const validateFileType = ({ type, name }: UploadFile, allowedTypes: string[] = ['image/jpeg']) => {
        return allowedTypes.includes(type!);
    };

    const uploadProps = useMemo(
        () =>
            ({
                multiple: true,
                beforeUpload: (file: UploadFile) => {
                    const isAllowedType = validateFileType(file);
                    if (!isAllowedType) {
                        message.error(`${file.name} is not JPEG file`);
                        return false;
                    }
                    setFileList((prev) => {
                        if (prev.length < 3) {
                            return [...prev, file];
                        }
                        return prev;
                    });
                    return false;
                },
                onRemove: (file: UploadFile) => {
                    setFileList((prev) => prev.filter((item) => item.uid !== file.uid));
                },
                onChange: (info) => {
                    if (info.fileList.length > 3) {
                        setTimeout(() => form.setFieldsValue({ attachment: fileList as any }), 2000);
                    }
                }
            } as UploadProps),
        [fileList]
    );

    const onSubmit = async (data: FormRule) => {
        console.log('data');
    };

    const normFile = (e: any) => {
        if (Array.isArray(e)) {
            return e;
        }
        return e && e.fileList;
    };

    return (
        <Form form={form} onFinish={onSubmit} layout='vertical'>
            <Form.Item
                name='attachment'
                valuePropName='attachment'
                getValueFromEvent={normFile}
                rules={[{ required: true }, { max: 3, message: 'Only 3 attachments are allowed', type: 'array' }]}
            >
                <Upload {...uploadProps} fileList={fileList}>
                    <Button icon={<UploadOutlined />}>Upload JPEG only</Button>
                </Upload>
            </Form.Item>

            <Button type='primary' htmlType='submit'>
                Submit
            </Button>
        </Form>
    );
};

export default Uploader;