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

【问题标题】：How to storeimage from input in mobx-state-tree model?如何从 mobx-state-tree 模型中的输入存储图像？
【发布时间】：2018-08-17 14:35:12
【问题描述】：

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

【问题讨论】：

标签： reactjs mobx mobx-state-tree

【解决方案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])
}

【讨论】：

【解决方案2】：

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

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

【讨论】：