如何在 Angular 中创建自定义文件上传按钮

Question

我想将<input type="file" />按钮的“选择文件”文本和丑陋的样式替换为其他一些文本，例如“上传”和漂亮的样式，也许使用mat-button. 在不安装任何额外的文件上传包的情况下实现这一目标的最干净的方法是什么？

Answer 1

使用以下模板：

.html：

<button type="button" (click)="fileInput.click()">
  <span>Upload</span>
  <input #fileInput type="file" (change)="onFileInput($event)" style="display:none;" />
</button>

单击功能将提示用户选择文件。