如何在 mobx-state-tree 模型中存储来自输入的图像？

Question

我正在尝试找到一种解决方案，如何将文件存储在 mobx-state-tree 模型中。但是 mobx-state-tree 没有 types.file 这样的东西。有谁知道如何处理这类问题？或者我必须找到其他解决方案？

Answer 1

我不确定这是否能回答您的问题，但我认为您尝试使用 MST 的目的超出了它的预期范围。通常，MST 用于存储您的应用程序状态，如果我没有正确理解您的问题，您的文件的实际内容不应该是应用程序状态的一部分。

我处理文件的通常做法是制作存储文件信息（名称、大小、扩展名、路径等）的模型，然后在您实际需要使用文件时检索文件。

Answer 2

如果有人仍然想知道如何处理输入 type="file" 数据，我最终在表单模型上使用了 volatile：

const EditForm = types
  .model({ /*...*/ })
  .volatile(() => ({
    pictureFile: null
  }))
  .actions(self => ({
    setPicture(file) {
      self.pictureFile = file;
    },
    save: flow(function*() {
      let formData = new FormData();
      formData.append('picture', self.picture);
      // ...
    })
  }))

在您的文件输入更改处理程序中：

onFileInputChange(e) {
  editFormStore.setPicture(e.target.files[0])
}

如何在 mobx-state-tree 模型中存储来自输入的图像？

How to storeimage from input in mobx-state-tree model?

reactjs

mobx

mobx-state-tree