如何通过Angular响应式表单将图片保存到本地存储并展示？

错误原因 #

this.form.get('Photo') 返回的是 AbstractControl 对象，并非直接的 File 类型，因此无法直接强制转换为File。要获取上传的文件，需要从input元素的files属性中读取。

完整修改方案 #

1. 编辑 edit.component.html

添加图片预览区域，并监听文件选择的change事件：

<form [formGroup]="form" (ngSubmit)="save()">
  <label class="head1">Photo</label> <br>
  <input type="file" formControlName="Photo" accept="image/*" (change)="onFileSelected($event)">
  <!-- 图片预览区域 -->
  <div *ngIf="previewUrl" class="mt-2">
    <img [src]="previewUrl" alt="Preview" style="max-width: 200px; max-height: 200px;">
  </div>
  <button [disabled]="form.invalid" class="mt-2">Save</button>
</form>

2. 编辑 edit.component.ts

添加文件存储变量、预览URL变量，实现文件选择处理、保存到localStorage、初始化读取localStorage的逻辑：

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-edit',
  templateUrl: './edit.component.html',
  styleUrls: ['./edit.component.css']
})
export class EditComponent implements OnInit {
  form = new FormGroup({
    Photo: new FormControl(null, Validators.required),
  });
  selectedFile: File | null = null;
  previewUrl: string | null = null;

  ngOnInit(): void {
    // 初始化时从localStorage读取已保存的图片
    const savedProfile = localStorage.getItem('profile');
    if (savedProfile) {
      const profile = JSON.parse(savedProfile);
      if (profile.photoBase64) {
        this.previewUrl = profile.photoBase64;
      }
    }
  }

  onFileSelected(event: Event): void {
    const input = event.target as HTMLInputElement;
    if (input.files && input.files.length > 0) {
      this.selectedFile = input.files[0];
      // 生成预览URL
      const reader = new FileReader();
      reader.onload = () => {
        this.previewUrl = reader.result as string;
      };
      reader.readAsDataURL(this.selectedFile);
      // 更新表单控件值，确保必填验证生效
      this.form.get('Photo')?.setValue(this.selectedFile.name);
    }
  }

  save(): void {
    if (!this.selectedFile) return;

    const reader = new FileReader();
    reader.onload = () => {
      const photoBase64 = reader.result as string;
      // 读取或初始化profile对象
      let profile = {};
      const savedProfile = localStorage.getItem('profile');
      if (savedProfile) {
        profile = JSON.parse(savedProfile);
      }
      // 保存base64格式的图片到profile
      profile['photoBase64'] = photoBase64;
      localStorage.setItem('profile', JSON.stringify(profile));
    };
    reader.readAsDataURL(this.selectedFile);
  }
}

关键说明 #

• 文件转换：使用FileReader将图片文件转换为Base64字符串，适配localStorage仅支持存储字符串的特性。
• 实时预览：通过readAsDataURL生成临时预览URL，选中图片后立即在页面展示。
• 表单验证：在文件选择事件中更新表单控件值，确保必填验证规则正常生效。
• 本地读取：组件初始化时从localStorage读取已保存的Base64图片，自动展示到页面。

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