使用 React Hooks 和 Ant 设计上传文件

Question

我正在尝试使用 React Hooks 和 AntDesign 的 Upload 组件上传文件。 我认为这不会有问题，并且我一直在尝试使用 React Hooks 的许多不同方法来做到这一点（没有 Hooks，我可以毫无问题地做到这一点）。

我在这里做了一个简化的例子： https://codesandbox.io/embed/upload-with-react-hooks-ant-design-1jmod?fontsize=14&hidenavigation=1&theme=dark

我确定我做错了，但似乎我无法找到实现这一目标的最佳方法。 我总是遇到过时的关闭，我不知道如何避免这种情况。

有什么问题？ 我没有在 processRemainingFiles 中得到文件。 将文件放入其中后，请查看控制台。 你会得到：

[uploadFile] undefined

尽管逻辑似乎对我有用，但我知道这段代码还有另一个问题：如果删除了另一个文件，那么它也会立即开始上传。 go 有很多方法可以解决这个问题，但由于它使代码更长，我更愿意分享一些更简单的东西。

Answer 1

    import { Upload} from 'antd';
    const Dragger = Upload.Dragger;
    
     const [fileList, setFileList] = useState<any[]>([]);
     const [FileSend, setFileSend] = useState<any[]>([]);
  

  const propsUpload = {
    onRemove: (file:any) => {
        const index = fileList.indexOf(file);
        const newFileList:any = fileList.slice();
        newFileList.splice(index, 1);

        return setFileList(newFileList)
    },
    beforeUpload: (file:any) => {
      setFileList([...fileList, file]); 
      return false;
    },
    onChange(info:any) {
      const listFiles = info.fileList.slice(-3);

      const newArrayFiles  = listFiles.map((file:any) => file.originFileObj? (file.originFileObj) : file );
      
      const anAsyncFunction = async (item:any) => {
        return convertBase64(item)
      }

      const getData = async () => {
        return Promise.all(newArrayFiles.map((item:any) => anAsyncFunction(item)))
      }
      getData().then(data => {
        setFileSend(data)
        console.log(data);
      })
    },
    multiple:true,
    fileList: fileList,
  };
 const convertBase64 = (file:File) => {
    return new Promise((resolve, reject) => {
      const fileReader = new FileReader();
      fileReader.readAsDataURL(file)
      fileReader.onload = () => {
        resolve(fileReader?.result);
      }
      fileReader.onerror = (error) => {
        reject(error);
      }
    })
  }

.......................
In return method:
.......................

       <Dragger {...propsUpload}>
                <p className="ant-upload-drag-icon">
                     <Icons.FaInbox />
                </p>
                <p className="ant-upload-text">Clique ou arraste o arquivo para fazer o upload</p>
                <p className="ant-upload-hint">Aguarde o carregamento para realizar o upload dos arquivos.</p>
       </Dragger>```


.........................
To send files in base64, send array FileSend.