Angular12+Formly v5文件上传仅返回路径不返回File对象问题排查

你编写的FileValueAccessor自定义值访问器未在对应模块中完成注册，Angular依旧使用默认值访问器处理文件输入框，该默认逻辑仅会返回文件的虚拟路径字符串，不会返回你预期的File对象。另外补充调试注意点：json管道无法序列化File类型对象，调试时直接通过console.log打印对应字段值结果更准确。

修复步骤 #

步骤1：注册FileValueAccessor指令 #

在声明FormlyFieldFile组件的模块（通常是AppModule或自定义的共享Formly模块）的declarations数组中加入FileValueAccessor，如果是共享模块还需要将其加入exports数组，确保指令在表单使用的作用域内生效。
示例配置参考：

@NgModule({
  declarations: [
    FormlyFieldFile,
    FileValueAccessor // 新增此行注册指令
  ],
  imports: [
    // 其余原有导入保持不变
    FormlyModule.forRoot({
      // 你原有Formly配置不需要修改
    })
  ]
})
export class AppModule { }

步骤2：按需调整返回值（单文件上传场景推荐） #

你当前的FileValueAccessor默认返回的是FileList对象数组，如果是单文件上传场景，可以修改指令的change事件绑定，直接返回第一个File对象，避免后续业务代码再手动取值：

@Directive({
  selector: 'input[type=file]',
  host: {
    // 修改为返回单个File对象
    '(change)': 'onChange($event.target.files?.[0])',
    '(blur)': 'onTouched()',
  },
  providers: [
    { provide: NG_VALUE_ACCESSOR, useExisting: FileValueAccessor, multi: true },
  ],
})
export class FileValueAccessor implements ControlValueAccessor {
  // 其余原有逻辑保持不变
}

步骤3：验证提交值 #

修改完成后在onSubmit方法中打印this.model.upload即可看到返回的File对象，可直接用于后续文件上传请求。

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