Angular中如何在不同路由组件间传递待上传文件

核心场景约束：图片选择操作在流程前置页面，最终上传请求需要在表单提交页发起，localStorage仅支持字符串存储无法直接保存File二进制对象，提交逻辑为先入库问卷数据，再上传图片并关联对应调研记录。

方案优先级排序（按适配度从高到低） #

1. 单页应用优先用全局状态暂存 #

如果你的调研流程是Vue/React等框架实现的单页应用，路由切换无页面刷新：

• 直接将选中的File对象存入Pinia/Vuex/Redux/全局Context即可
• 无序列化转换开销，跳转至最终提交页直接读取状态中的File对象使用
• 兜底兼容：若流程允许页面刷新，搭配sessionStorage/IndexedDB做持久化备份，避免刷新后状态丢失

2. 小体量单图场景用sessionStorage临时存储 #

适合单张配图、文件大小在5MB以内的场景，sessionStorage仅在当前标签页生命周期生效，关闭标签页自动清理，无长期存储占用：

• 选图页拿到File对象后，通过FileReader将文件转为base64字符串，连同文件名、文件类型等元信息序列化后存入sessionStorage
• 提交页从sessionStorage读取数据后，通过fetch(base64).then(res=>res.blob())还原为File对象即可用于上传
• 示例代码：

// 选图页存储逻辑
const saveTempImage = (file) => {
  const reader = new FileReader()
  reader.onload = e => {
    sessionStorage.setItem('survey_temp_img', JSON.stringify({
      base64: e.target.result,
      name: file.name,
      type: file.type
    }))
  }
  reader.readAsDataURL(file)
}

// 提交页读取还原逻辑
const getTempImage = async () => {
  const cache = JSON.parse(sessionStorage.getItem('survey_temp_img'))
  if (!cache) return null
  const blob = await fetch(cache.base64).then(res => res.blob())
  return new File([blob], cache.name, { type: cache.type })
}

• 注意：图片上传完成后及时删除sessionStorage中对应缓存，避免占用空间

3. 多图/大文件场景用IndexedDB存储 #

如果需要传递的图片总大小超过5MB，sessionStorage存储上限不足时使用：

• IndexedDB是浏览器原生的本地数据库，支持直接存储Blob/File二进制对象，单源存储上限通常可达数百MB
• 选图页直接将File对象存入IndexedDB指定表，提交页读取后使用，上传完成后删除对应临时记录即可
• 嫌原生API复杂可以用localForage这类封装库简化操作，API和localStorage一致，自动适配IndexedDB/WebSQL/localStorage存储

4. 高稳定性场景用临时文件预上传 #

不想处理本地存储兼容、大小限制问题时选用，体验最稳定：

• 用户选完图片后立刻将图片上传至服务器临时存储区，拿到临时文件ID/URL存入sessionStorage
• 提交页先提交问卷数据拿到调研记录ID，再调用接口将临时文件ID和调研记录ID做关联即可
• 需要后端配合：给临时文件设置过期自动清理规则，比如24小时未关联正式记录的临时文件自动删除，避免冗余存储占用

相关页面参考 #

• 上传组件页面：
  
• 流程最终提交页：
  

内容的提问来源于stack exchange，提问作者Jesus Castañeda