使用 React Hooks 和 Ant Design 上传文件

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

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

怎么了？我在进程中没有得到文件剩余文件。在控制台中放置文件后，请查看控制台。您将获得：

[uploadFile] undefined

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

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.