reactjs - 如何从 mobx-state-tree 模型中的输入存储图像？

Question

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

Answer 1

如果有人仍然想知道如何处理输入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])
}

Answer 2

我不确定这是否会回答您的问题，但我认为您正在尝试使用 MST 做的事情超出了它应该做的事情。通常，MST 用于存储您的应用程序的状态，如果我正确理解了您的问题，则文件的实际内容不应成为应用程序状态的一部分。

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