PrimeNG FileUpload组件多文件上传功能无法启用求助

问题根源 #

你的写法存在两处不符合Angular属性绑定规则的问题：

1. HTML模板中使用了原生HTML的布尔属性写法multiple="multiple"，但PrimeNG组件需要遵循Angular的属性绑定逻辑来识别布尔属性。
2. 你在组件类中定义了multiple变量，但未在模板中通过属性绑定关联该变量，导致变量设置无法同步到组件。

正确实现方案 #

方案一：直接在模板启用多文件上传 #

无需在组件类定义变量，直接使用Angular布尔属性的简化写法：

<div class="card">
  <p-fileUpload name="myfile[]" url="./upload.php" multiple accept=".zip, .fap">
  </p-fileUpload>
</div>

注：在Angular中，布尔属性只要标签上存在，就表示启用（值为true），不需要额外赋值="multiple"或="true"。

方案二：通过组件变量动态控制（适合需要开关的场景） #

如果需要动态切换多文件上传功能，需在模板中绑定组件类的变量：

1. 组件类代码（保留你的现有逻辑即可）：

export class UploadComponent implements OnInit {
  multiple: boolean;
  constructor() { }

  ngOnInit(): void {
    this.multiple = true;
  }
}

2. 模板代码修改为：

<div class="card">
  <p-fileUpload name="myfile[]" url="./upload.php" [multiple]="multiple" accept=".zip, .fap">
  </p-fileUpload>
</div>

这里通过[multiple]="multiple"实现组件变量与模板属性的双向绑定，确保变量值能同步到FileUpload组件。

额外排查点 #

• 确认PrimeNG版本与官方文档匹配，部分旧版本对属性写法有不同要求。
• 检查浏览器控制台是否有其他报错，比如FileUploadModule未在模块中声明、组件导入错误等，这些也会导致功能失效。

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