Angular+ASP.NET Core编辑页图片上传及DTO类型不兼容问题求解

问题根因 #

编辑页传入表单组件的actorDTO类型picture属性为字符串（存储现有图片地址），但表单组件默认接收的actorCreationDTO类型picture属性为File类型（用于新上传图片），类型不匹配触发编译报错。

修复步骤 #

1. 调整表单组件输入类型兼容两种场景 #

打开form-actor.component.ts，修改输入参数的类型定义，让表单同时支持创建和编辑两种场景的传参：

// 首先引入两个接口
import { actorCreationDTO, actorDTO } from '../actors.model';

// 修改@Input()参数的类型为联合类型
@Input()
model!: actorCreationDTO | actorDTO;

修改后表单可以同时接收创建和编辑两种模式的入参，编辑时的字符串类型图片地址可以正常传给图片组件做回显。

2. 优化表单提交逻辑兼容编辑场景 #

编辑时如果用户没有选择新图片，表单里的picture还是原有字符串地址，不需要传给后端（后端默认保留原有图片即可），修改form-actor.component.ts的提交方法：

saveChanges(){
  const submitValue = {...this.form.value};
  // 如果picture为字符串类型，说明用户未上传新图，删除该字段避免后端类型报错
  if(typeof submitValue.picture === 'string'){
    delete submitValue.picture;
  }
  this.onSaveChanges.emit(submitValue as actorCreationDTO);
}

3. 可选：模型层兼容（推荐） #

如果想从根源避免类型问题，直接修改actors.model.ts中创建接口的picture定义为联合可选类型：

export interface actorCreationDTO{
  name:string;
  dateOfBirth:Date;
  picture?: File | string;
  biography?:string;
}

修改后无需调整表单组件的输入类型，天然兼容创建和编辑场景。

效果验证 #

• 编辑模式下现有图片可正常回显
• 选择新图片后可以正常上传提交
• 原有创建功能不受影响
• 编译报错完全消失

注：课程代码可以正常运行大概率是课程环境的TypeScript严格类型检查未开启，不会校验属性类型兼容性。

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