使用 customRequest Ant Design (antd) 上传文件停留在“上传”状态

Posted 2023-02-18

【中文标题】使用 customRequest Ant Design (antd) 上传文件停留在“上传”状态

【英文标题】：Upload file stuck on 'uploading' status with customRequest Ant Design (antd)

【发布时间】：2021-07-03 01:10:02

【问题描述】：

在使用 Ant Design (antd) 上传文件方面，我真的需要您的帮助。我不需要上传组件的请求操作，因此我使用 customRequest 中的 onSuccess() 函数跳过获取，但 onChange 方法的状态仅停留在“上传”上。它不会进入“完成”状态。我需要你的帮助，请

沙盒链接：https://codesandbox.io/s/runtime-platform-znyow?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>
      );
    

【参考方案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' 并且令人惊讶的是它可以工作。可能有更好的解决方案来解决这个问题，但也许这会有所帮助

【讨论】：

这个修复也对我有用。我想知道是否有更好的解决方法。

【参考方案2】：

请在onChange(info)函数中设置FileList(fileList)