使用 React Hooks 和 Ant Design 上传文件答案

【问题标题】：Upload files with React Hooks and Ant Design使用 React Hooks 和 Ant Design 上传文件
【发布时间】：2020-06-27 03:01:45
【问题描述】：

我正在尝试使用 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

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

【问题讨论】：

您的代码框显示它被击中 100%，并且在 UI 中没有显示任何上传的文件。你说你的逻辑是有效的，但看起来它没有。你能更清楚你想要达到的目标吗？像多文件上传与 antd 上传组件与反应钩子..这是你在找什么？
我澄清了一点，因为这是真的，我并没有真正说出我得到的错误。现在很容易检查代码并遇到问题:) 我找到了一种不同的方式来做我喜欢的事情，而且，我希望这段代码可以工作（因为从技术上讲，我仍然很难理解它的去向错误）。

标签： javascript reactjs file-upload react-hooks antd

【解决方案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.

【讨论】：