Angular响应式表单更新数据时文件类型(图片)值无法Patch问题求助

问题根因 #

该问题存在两个核心原因：

1. 浏览器原生文件输入框出于安全策略限制，不允许JS直接赋值文件路径/File对象到原生输入框，ngx-mat-file-input封装原生输入后，虽然支持接收File对象赋值，但默认不会自动触发视图更新，导致输入框未显示文件名。
2. 当前把接口返回base64转File再赋值的流程冗余，实际提交时如果用户未修改图片，转File再转回base64属于多余操作。

解决方案 #

优先推荐方案一，更符合常规交互习惯，实现成本更低：

方案一：新增预览区域，简化逻辑 #

不需要强行给文件输入框赋值，新增图片预览区域展示现有图片，用户未修改图片时直接复用原有base64提交即可：

1. 修改模板，新增预览区域：

<mat-form-field appearance="outline" fxFlex="1 1 calc(25% - 10px)" fxFlex.lt-md="1 1 calc(25% - 10px)"fxFlex.lt-sm="100%" fxFlex.xs="100%" class="from-color">
  <mat-label class="label-padding">User Picture</mat-label>
  <!-- 现有图片预览 -->
  <div *ngIf="data?.picture && !url">
    <img [src]="'data:image/*;base64,' + data.picture" alt="用户头像" width="80" style="margin: 8px 0;">
  </div>
  <!-- 新选择图片预览 -->
  <div *ngIf="url">
    <img [src]="url" alt="新选择的头像" width="80" style="margin: 8px 0;">
  </div>
  <ngx-mat-file-input type="file" formControlName="picture" placeholder="User Picture"
    (change)="uploadPic($event.target)">
  </ngx-mat-file-input>
  <mat-icon matSuffix>publish</mat-icon>
</mat-form-field>

2. 修改提交逻辑，兼容新旧图片：

submitForm() {
  let submitPic = this.imgArrayy;
  // 用户未选择新图片时直接使用原有base64
  if (!this.imgArrayy && this.data?.picture) {
    submitPic = this.data.picture;
  }
  // 组装提交参数
  const params = {
    userId: this.userId.value,
    picture: submitPic
  }
  // 调用接口提交
}

3. 更新操作时删除this.picture.patchValue(...)这行代码即可。

方案二：强制给文件输入框赋值显示文件名 #

如果必须要让ngx-mat-file-input显示已有文件的文件名，按以下步骤修改：

1. 给模板中的文件输入框新增模板引用：

<ngx-mat-file-input #picInput type="file" formControlName="picture" placeholder="User Picture"
  (change)="uploadPic($event.target)">
</ngx-mat-file-input>

2. 组件中引入并获取组件实例：

import { ViewChild } from '@angular/core';
import { NgxMatFileInputComponent } from '@angular-material-components/file-input';

// 类内部声明
@ViewChild('picInput', { static: false }) picInput!: NgxMatFileInputComponent;

3. 修改更新赋值逻辑：

if (this.data) { 
  this.userId.patchValue(this.data.userId);
  const picFile = this.dataURItoBlob(this.data.picture);
  this.picture.patchValue(picFile);
  // 手动给组件赋值触发视图更新
  setTimeout(() => {
    this.picInput.value = picFile;
  }, 0);
}

4. 优化File生成逻辑，给文件名加后缀避免组件识别异常：

dataURItoBlob(dataUrl:any) { 
  const byteString = window.atob(dataUrl);
  const arrayBuffer = new ArrayBuffer(byteString.length);
  const int8Array = new Uint8Array(arrayBuffer);
  for (let i = 0; i < byteString.length; i++) {
    int8Array[i] = byteString.charCodeAt(i);
  }
  const blob = new Blob([int8Array], { type: 'image/*' });    
  this.holdBlob = blob;
  // 给文件名加.png后缀
  this.holdName = this.data.userId + '.png';
  this.holdFile = new File([blob], this.holdName, { type: 'image/*' });
  return this.holdFile;
}

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