在 MEAN Stack 中添加文件输入按钮

在本节的图像上传模块中，我们将学习 文件输入按钮。当我们点击 文件输入按钮 时，将打开一个文件选择器，从该文件选择器中，我们将选择一个图像文件。我们将使用以下步骤添加文件输入按钮

1) 我们将转到 post-create.component.html 文件，在这里我们将添加一个新按钮。我们将在帖子的标题下方添加此按钮。我们将使用 <div></div>，在这里我们将创建 <button></button>，并使用 mat-button 指令，该指令会将按钮变成一个 Angular Material 按钮，如下所示

现在，如果我们返回到我们的 Angular 应用程序并单击 选择图像 按钮，我们将收到验证错误，因为默认情况下，此按钮将尝试提交表单。

2) 我们将通过将此按钮的类型设置为 button 来更改此设置，如下所示

我们将更改此按钮的外观。我们将使用 mat-stroked-button 而不是使用 mat-button，如下所示

该按钮应如下所示

3) 现在，我们需要添加打开文件选择器对话框的功能。我们有一个默认的输入，我们可以使用 type file。当我们添加这个时，我们将得到文件选择器对话框，如下所示

4) 这个选择器看起来真的很丑，而且它没有默认的 Material 样式。因此，我们必须隐藏这个选择器，而不是从 DOM 中删除它。它应该在那里，只是被隐藏。当我们点击该按钮时，我们希望模拟对该选择器的点击事件。因此，我们将使用该默认的点击功能，并将选择的文件存储在该输入中。但是我们看不到那个丑陋的界面。

现在，要做到这一点，我们将隐藏输入，我们将在该组件的 CSS 文件中完成此操作。我们将编写如下 CSS 代码

编写 CSS 代码后，文件选择器消失了，但它仍然是 DOM 的一部分。

5) 现在，我们将通过为带有井号的输入提供本地引用，并将按钮点击传递到此输入，在按钮点击时，我们将执行文件选择器，如下所示

现在，如果单击该按钮，我们将看到文件选择器，如下所示

现在，我们需要将此输入注册为表单的输入，我们将通过切换到创建和处理该表单的响应式方法来完成此操作。它为我们提供了更多的功能，更多的特性。我们还希望添加我们自己的验证器来验证我们只上传图像文件。这是一个高级功能，如果我们使用响应式表单方法，则更容易实现。

在下一节中，我们将学习如何将表单从模板驱动方法转换为响应式方法。