Vuex-persistedstate无法持久化存储文件输入组件的文件对象

你的问题核心是File对象无法被JSON序列化，而vuex-persistedstate本质是把Vuex状态转成JSON字符串存在localStorage，所以刷新后File对象会丢失。结合你不想存Blob的需求，给你几个实用方案：

方案1：内存存File对象，持久化元数据 #

只把文件的元数据（文件名、大小、类型、最后修改时间）存在Vuex并持久化，实际的File对象仅保留在内存中（比如组件的data里，或者Vuex中被vuex-persistedstate排除的节点）。

• 操作步骤：
  • 配置vuex-persistedstate的paths或filter，排除存储File对象的state节点；
  • 用户选择文件时，同时保存元数据和File对象到Vuex；
  • 刷新页面后，Vuex中只剩元数据，这时候可以在界面提示用户重新选择文件，并用元数据校验是否为同一文件（比如对比文件名+大小）。
• 优点：实现简单，完全不占用持久化存储的容量；
• 缺点：刷新后需要用户重新选择文件，体验略差。

方案2：上传到临时存储，持久化文件标识 #

这是生产环境最推荐的方案：用户选择文件后，立即上传到后端的临时存储（或者云存储的临时桶），后端返回一个临时文件ID/URL，把这个标识存在Vuex并持久化。

• 操作步骤：
  • 封装文件上传接口，接收File对象，返回临时文件ID；
  • 选择文件后调用上传接口，把ID存入Vuex；
  • 刷新页面后，从Vuex取出ID，后续提交表单或预览时，用ID从服务端获取文件。
• 优点：彻底解决持久化问题，不用担心文件移动/删除（服务端存储更可靠），支持大文件；
• 缺点：需要后端配合实现临时存储逻辑，或者使用第三方云存储服务。

方案3：用IndexedDB存储File对象 #

IndexedDB支持直接存储File/Blob对象，且容量远大于localStorage（一般几十GB）。可以用localForage这类库简化操作，替代vuex-persistedstate来持久化包含File对象的状态。

• 操作步骤：
  • 安装localForage；
  • 监听Vuex中文件状态的变化，把File对象存入IndexedDB；
  • 页面初始化时，从IndexedDB读取File对象，恢复到Vuex中。
• 示例代码片段：

  // 存储文件
  async function saveFileToDB(file) {
    await localforage.setItem('upload-file', file);
  }
  
  // 恢复文件
  async function restoreFileFromDB() {
    return await localforage.getItem('upload-file');
  }
  

• 优点：不用上传服务器，也能持久化File对象；
• 缺点：IndexedDB的API相对复杂，需要额外封装逻辑处理状态同步。

内容的提问来源于stack exchange，提问作者Carel