在 React Redux 存储中存储文件对象的最佳方式（从 DropZone 上传文件？）

Posted 2023-05-08

【中文标题】在 React Redux 存储中存储文件对象的最佳方式（从 DropZone 上传文件？）

【英文标题】：Best way to store file objects in React Redux store (files upload from DropZone?)

【发布时间】：2020-08-25 14:11:42

【问题描述】：

我目前正在使用 Material Ui dropzone 上传多个文件。只是想知道在 redux 商店中添加/更新文件的最佳方法是什么。当“onChange”触发返回dropzone上的所有文件并通过存储具有文件对象的整个文件数组来更新redux状态时，我目前正在执行调度操作。

请告诉我是否有最好的方法来处理这个问题。

【问题讨论】：

您的问题很开放，您需要对文件做什么，您需要处理还是仅用于直接发送到服务器？你的 react 和 redux 版本是什么？

我需要将文件直接发送到服务器 post 端点。我正在使用 react 16.13.1 和 redux: 4.0.5

在这种情况下最好不要使用redux store。您可以直接在组件中调用 API post。还有其他类似于 dropzone 的库，你可以看看github.com/pqina/filepond，这直接包括帖子。更推荐使用 Store 在组件之间共享可序列化。

【参考方案1】：

Redux 的关键规则之一是non-serializable values should not go into the store。因此，如果可能的话，文件对象应该不保存在 Redux 存储中。

【讨论】：

然后只是存储在本地状态并将其发送到操作并进行后 API 调用？我想这是不将其添加到 redux 商店的唯一方法。好听吗？

基本上，是的。除非有很多其他组件确实需要访问这些文件，否则没有充分的理由将它们放在 Redux 存储中。

还有一个问题，在没有提交按钮的情况下进行 API 调用以将文件发送到服务器的空闲方式在哪里。 “onChange”方法给出了dropzone中的所有文件，而“onDrop”方法只给出了当时被丢弃的文件。我正在考虑对“onDrop”进行 API 调用，请告诉我。

【参考方案2】：

我遇到了类似的问题并最终使用了这个：

URL.createObjectURL(file)

它返回一个类似blob:http://example.com/f331074d-a7f3-4972-9c37-96b490a4dd96的url，它只是一个字符串，可以在img标签的src属性中使用。不确定 Material Ui dropzone 返回什么，但这适用于 <input type="file" /> 返回的 File 对象

【讨论】：

你将如何使用这个将文件发送到后端？