p-fileUpload 更改多个控件的默认图标

Question

我在表单上上传两个文件，我想为每个控件应用不同的图标。

<p-fileUpload
  mode="basic"
  title="Photo"
  name="Photo[]"
  accept="image/*"
></p-fileUpload>

<p-fileUpload
  mode="basic"
  name="signature[]"
  accept="image/*"
></p-fileUpload>

目前我只能进行一项控制。我尝试使用

name

和

title

但没有成功。

:host ::ng-deep .p-fileupload-choose {
  background: none;
  border: none;
  content: url('../autograph.png') !important;
}

另外，我听说

ng-deep

已被弃用。还有其他方法可以做到这一点吗？

堆栈闪电战

Answer 1

最简单的方法是覆盖组件的

chooseicon

模板：

<p-fileUpload mode="basic" title="Photo" name="Photo[]" accept="image/*">
  <ng-template pTemplate="chooseicon">
    <img class="icon" src="../autograph.png" />
  </ng-template>
</p-fileUpload>

<p-fileUpload mode="basic" name="signature[]" accept="image/*">
  <ng-template pTemplate="chooseicon">
    <img class="icon" src="../something-else.png" />
  </ng-template>
</p-fileUpload>

.icon {
  width: 16px;
  height: 16px;
}

堆栈闪电战