Angular 2+中如何保存文件dataURL到localStorage？获取时为空对象

我明白你遇到的问题了——直接把文件相关对象存进localStorage，取出来变成空对象，这是个很常见的坑，原因其实很简单：localStorage只能存储字符串类型的数据，而你尝试存储的File对象是浏览器提供的复杂对象，当你用JSON.stringify处理它时，它的大部分属性都是不可枚举的，最终会被序列化成{}，所以取出来解析后自然就是空对象了。

下面是修正后的完整实现方案，帮你正确把文件的dataURL存入并读取localStorage：

1. HTML模板（补充触发按钮方便测试） #

<input style="display:none;" type="file" (change)="fileEvent($event)" #fileInput>
<button (click)="fileInput.click()">选择文件</button>
<button (click)="getStoredFile()">读取存储的文件数据</button>

2. Angular组件逻辑 #

import { Component } from '@angular/core';

@Component({
  selector: 'app-file-storage',
  templateUrl: './file-storage.component.html',
  styleUrls: ['./file-storage.component.css']
})
export class FileStorageComponent {

  fileEvent(ev: Event): void {
    const inputElement = ev.target as HTMLInputElement;
    // 校验是否有选中文件
    if (!inputElement.files || inputElement.files.length === 0) {
      console.warn('请选择一个文件');
      return;
    }

    const selectedFile = inputElement.files[0];
    const reader = new FileReader();

    // 文件读取成功后的回调
    reader.onload = (loadEvent) => {
      // 获取文件的dataURL字符串
      const fileDataURL = loadEvent.target?.result as string;
      // 构建可序列化的存储对象
      const storageObj = {
        Key: selectedFile.name,
        ContentType: selectedFile.type,
        DataURL: fileDataURL
      };

      // 转成JSON字符串存入localStorage
      localStorage.setItem('userSelectedFile', JSON.stringify(storageObj));
      console.log('文件数据已成功存入localStorage');
    };

    // 处理文件读取错误
    reader.onerror = (error) => {
      console.error('文件读取失败:', error);
    };

    // 以dataURL格式读取文件内容
    reader.readAsDataURL(selectedFile);
  }

  // 从localStorage读取文件数据的方法
  getStoredFile(): void {
    const storedDataStr = localStorage.getItem('userSelectedFile');
    if (storedDataStr) {
      const storedFileData = JSON.parse(storedDataStr);
      console.log('从localStorage读取到的文件数据:', storedFileData);
      // 这里可以用storedFileData.DataURL做后续操作，比如展示图片：<img [src]="storedFileData.DataURL">
    } else {
      console.log('localStorage中没有存储的文件数据');
    }
  }
}

关键注意点 #

• 必须用FileReader转成dataURL：只有把文件内容读取成字符串格式的dataURL，才能被JSON序列化后存入localStorage
• 序列化与反序列化：存储前用JSON.stringify把对象转成字符串，读取时用JSON.parse转回对象
• 存储限制：localStorage的存储上限一般在5MB左右，而且dataURL是base64编码，会比原文件体积大30%左右，大文件不适合存在这里，建议用IndexedDB替代

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