Angular12 Material UI图片上传时如何避免FormGroup向数据库插入图片预览文本

核心原因是你的预览base64和提交字段共用了同一个FormControl，或是直接操作FormGroup绑定的value对象时，双向绑定逻辑会自动把预览内容回填到表单字段里，导致你删完又被重新生成。

• 方案1：拆分字段，预览内容不进FormGroup（最推荐） #

  不要把预览用的base64存入FormGroup，单独用组件临时变量存储预览地址，FormGroup仅维护需要提交到数据库的字段：

  import { FormBuilder, FormGroup, Validators } from '@angular/forms';
  import { HttpClient } from '@angular/common/http';
  
  // 组件类中定义临时预览变量，不加入FormGroup
  tempPreviewSrc: string = '';
  galleryForm: FormGroup;
  
  constructor(private fb: FormBuilder, private http: HttpClient) {
    // FormGroup仅声明需要提交的字段
    this.galleryForm = this.fb.group({
      galleryName: ['', Validators.required],
      uploadFileName: ['', Validators.required]
    })
  }
  
  // 文件选择回调
  onFilePick(event: Event): void {
    const target = event.target as HTMLInputElement;
    const selectFile = target.files?.[0];
    if (!selectFile) return;
  
    // 仅把需要提交的文件名写入FormGroup
    this.galleryForm.patchValue({ uploadFileName: selectFile.name });
    
    // 预览base64写入临时变量，不碰FormGroup
    const reader = new FileReader();
    reader.onload = (e) => {
      this.tempPreviewSrc = e.target?.result as string;
    }
    reader.readAsDataURL(selectFile);
  }
  

  视图层预览直接绑定临时变量：

  <!-- 预览区域绑定临时变量，不关联FormControl -->
  <img *ngIf="tempPreviewSrc" [src]="tempPreviewSrc" alt="图片预览">
  

• 方案2：提交前深拷贝表单值再剥离字段 #

  如果你不想调整现有字段结构，提交时不要直接传formGroup.value，先深拷贝得到独立对象后再删除预览字段，避免双向绑定回填：

  onSubmit(): void {
    // 深拷贝得到完全脱离FormGroup绑定的新对象
    const submitPayload = JSON.parse(JSON.stringify(this.galleryForm.value));
    // 删除预览字段，不会触发原表单的回填逻辑
    delete submitPayload.previewBase64;
    // 用剥离后的对象提交请求
    this.http.post('/api/gallery/create', submitPayload).subscribe(res => {
      // 提交成功处理
    })
  }
  

• 方案3：手动构造提交payload，避免带入冗余字段 #

  完全不依赖FormGroup的完整value，手动按需取需要提交的字段值构造请求参数，从根源上规避预览字段被带入：

  onSubmit(): void {
    const formVal = this.galleryForm.value;
    // 只列出需要存入数据库的字段
    const submitPayload = {
      galleryName: formVal.galleryName,
      uploadFileName: formVal.uploadFileName
    }
    this.http.post('/api/gallery/create', submitPayload).subscribe()
  }
  

• 方案4：禁用预览字段的双向绑定 #

  如果必须把预览存在FormGroup里，把预览区域的双向绑定改成单向只读绑定，避免预览内容被自动写回FormControl：

  <!-- 不要用[(ngModel)]或formControlName绑预览字段，仅做单向展示 -->
  <img [src]="galleryForm.get('previewSrc').value" alt="预览">
  

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