如何修改PrimeNG中<p-fileUpload>组件选择按钮的图标？

阿华AIGC实验室

2026-5-26

修改PrimeNG 组件选择按钮图标的方法

当然可以修改这个图标！针对你使用的mode="basic"模式，这里有两种简单可行的方案：

方案一：用CSS覆盖默认图标

PrimeNG的basic模式下，默认的"+"图标是通过伪元素生成的，我们可以通过CSS直接替换它：

/* 隐藏默认的+图标 */
.p-fileupload-basic .p-button-icon {
    display: none;
}

/* 自定义新图标 */
.p-fileupload-basic .p-button-label::before {
    content: "\e905"; /* PrimeIcons中"上传"图标的Unicode编码 */
    font-family: 'PrimeIcons';
    margin-right: 0.5rem; /* 保持图标和文字的间距 */
}

你可以根据需求替换content里的编码——比如想要"文件"图标就用"\e921"，想要"图片"图标用"\e91f"。如果你用的是Font Awesome等其他图标库，只需要修改font-family和对应的图标编码即可。

方案二：自定义按钮模板（PrimeNG 12+版本适用）

如果你的PrimeNG版本在12及以上，可以直接通过模板完全自定义选择按钮的内容，这种方式更灵活：

<p-fileUpload class="btn-primary" auto="true" mode="basic" name="demo[]" 
              [url]="apiImageLocation" accept="image/*" maxFileSize="2000000" 
              (onUpload)="onUploadImageSuccess($event)" 
              (onError)="onUploadImageError($event)">
  <!-- 自定义选择按钮的模板 -->
  <ng-template pTemplate="choose">
    <button type="button" class="p-button p-button-primary">
      <i class="pi pi-upload"></i> <!-- 这里替换成你想要的图标类名 -->
      <span>Upload</span>
    </button>
  </ng-template>
</p-fileUpload>

这种方法可以自由搭配图标和文字，甚至添加额外的元素，完全摆脱默认样式的限制。