我们如何维护 mobx-state-tree 中的文件类型“File”答案

【问题标题】：How can we maintain the file type "File" in mobx-state-tree我们如何维护 mobx-state-tree 中的文件类型“File”
【发布时间】：2020-03-22 14:56:07
【问题描述】：

从文档中我了解到 mobx-state-tree 支持的复杂类型是

types.model(properties, actions) 定义一个“类类”类型，使用对对象进行操作的属性和动作。
types.array(类型) 声明指定类型的数组。
types.map(type) 声明一个指定类型的地图。

但是，我想使用 HTML 元素 <input type="file" /> 并将其维护在我的状态树中。这可能吗？

【问题讨论】：

标签： javascript reactjs mobx mobx-state-tree

【解决方案1】：

MST 用于（主要）处理可序列化的数据。如果你的文件不大，可以base64保存为types.string。否则，types.volatile 是处理不可序列化 blob 的最佳方式。以下是相关文档：https://mobx-state-tree.js.org/concepts/volatiles

【讨论】：

【解决方案2】：

我通过一个名为 blobMap 的全局对象解决了这个问题。 blobMap 是字符串（“blobId”）到 Blob 对象的映射。然后我将 blobId 作为简单的 types.string 存储在 mobx-state-tree 中，当我需要实际的 Blob 时，我调用 blobMap[blobId]

当然blob只会在页面上的特定会话中有效，所以如果你刷新页面并且这个blobId还在你的树中，你可以检查一下那个blobId是否还在blobMap中并提示如果需要，用户可以重新加载它

我在这里可以互换地使用术语 Blob/文件（文件是 Blob 的一种类型），因此您可以用文件替换此答案中的任何 blob 用法，它应该是有效的。

【讨论】：