使用 customRequest Ant Design (antd) 上傳文件停留在“上傳”狀態

Question

在使用 Ant Design (antd) 上傳文件時，我真的需要您的幫助。 我不需要上傳組件的請求操作，因此我在 customRequest 中使用 onSuccess() function 來跳過獲取，但 onChange 方法的狀態僅停留在“上傳”上。 它不會 go 進入“完成”狀態。 我需要你的幫助，請

沙盒鏈接： https://codesandbox.io/s/runtime-platform-znow?file=/src/App.js

    import React, { useState } from "react";
    import "./styles.css";
    import { Button, Upload } from "antd";

    export default function App() {
      const [fileList, setFileList] = useState([]);

      const fileProps = {
        action: "",
        name: "file",
        multiple: true,
        customRequest(e) {
          e.onSuccess();
        },
        onChange(info) {
          const { status } = info.file;
          console.log(status); // always 'uploading'
          if (status === "done") {
            // this part is unreachable
            let fileList = [...info.fileList];
            setFileList(fileList);
          }
        },
        onRemove: (file) => {
          setFileList((prevState) => prevState.filter((d) => d.uid !== file.uid));
        }
      };

      return (
        <div className="App">
          <Upload {...fileProps} fileList={fileList}>
            <Button type="primary">Attach file</Button>
          </Upload>
        </div>
      );
    }

Answer 1

更新antd版本后我遇到了類似的問題。 這是我如何在不發送請求的情況下解決此問題的代碼。

    const handleChange = useCallback((info) => {
    if (info.file.status === 'uploading') {
        setImage({ loading: true, image: null });
        info.file.status = 'done';
    }
    if (info.file.status === 'done') {
        getBase64(info.file.originFileObj, (imageUrl) => {
            const img = new Image();
            img.src = imageUrl;
            img.addEventListener('load', function () {
                setImage({ loading: false, image: imageUrl });
                setFileList([{ ...info.fileList[0] }]);
            });
        });
    }
}, []);

內部條件(info.file.status === 'uploading')我已經更改了info.file.status === 'done'並且令人驚訝的是它可以工作。 可能有更好的解決方案來解決這個問題，但這可能會有所幫助

Answer 2

請在 function onChange(info) 中設置 FileList(fileList)