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

Question

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

• types.model（properties，actions）定义“类类似”类型， 在对象上操作的属性和动作。
• types.array（type） 声明指定类型的数组。
• types.map（type）声明一个 指定类型的地图。

  

但是我想使用来从元素中加载“文件”类型   HTML元素<input type="file" />并将其维护在我的状态树中。   这可能吗？

Answer 1

MST用于（主要）处理可序列化的数据。如果文件不大，则可以对其进行base64并另存为types.string。否则，types.volatile是处理不可序列化Blob的最佳方法。以下是有关此文档的文档：https://github.com/mobxjs/mobx-state-tree#volatile-state

Answer 2

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

当然 blob 只会在页面上的特定会话中有效，因此如果您刷新页面并且此 blobId 仍在您的树中，您可以检查该 blobId 是否仍在 blobMap 中并提示用户在需要时重新加载它

我在这里交替使用 Blob/File 一词（文件是 Blob 的一种），因此您可以用文件替换此答案中 Blob 的任何用法，并且它应该是有效的。