在MEAN Stack中添加图像控件和预览图像

在前一节中，我们成功地将表单从模板驱动方法转换为响应式方法。在本节中，我们将添加图像控件，以便将图像存储在MEAN Stack中。

现在，我们想确保当我们从图像选择器中选择图像时，它应该作为输入或作为值存储在我们的表单中。之前，我们将按钮连接到图像选择器。因此，我们需要在选择图像时执行某些操作。我们将使用以下步骤来执行此操作

1) 我们将处理用户从图像选择器中选择图像的情况。我们将在图像选择器上注册change事件。每当用户更改所选文件时，就会触发change事件。因此，如果用户从“未选择文件”更改为“此处有一个文件”，或者如果他随后更改了文件，我们将以以下方式执行该事件或方法

2) 我们将转到我们的typescript代码并添加此方法。在此方法中，我们希望获得一个类型为Event的事件。

3) 现在，我们将提取添加的文件。为此，我们将创建一个新的常量，并通过访问我们单击的事件目标来访问该文件。

这行代码将显示一个错误。问题是typescript不知道我们的事件目标是文件输入，因此它不知道此文件属性是否存在。我们将通过转换此事件目标或通过显式告诉typescript它将是HTML输入元素的类型来解决此问题。

为此，我们将用括号将事件目标括起来，然后添加as HTMLInputElement。这是一种类型转换，它清楚地告诉typescript，整个表达式将是一个恰好具有files属性的HTML输入元素。

"Files"是一个文件数组，我们只需要选择一个，因此我们使用files[0]从该数组中获取第一个元素，即用户选择的文件。

4) 现在，我们需要将此文件存储在表单控件中。我们只有两个控件，即title和content。在ngOnInit中，我们将创建一个新的“form-control”，并且在此“form-control”中，我们将初始设置为null值，如

我们在这里没有做的一件事是我们不会将图像控件绑定到任何HTML元素。我们不会将它与文件选择器输入绑定，因为我们已经隐藏了它，并且我们不想在那里显示任何东西。因此，我们不会将此与HTML同步，这正是响应式方法的优点所在。我们不需要同步它。相反，我们可以完全在typescript中管理幕后的值。因此，这现在是对表单的控制，我们可以使用typescript手动控制该值。

5) 现在，在PickedImage()函数中，我们将访问我们的表单并调用patchValue()。在setValue()中，我们将设置表单上所有输入或所有控件的值。patchValue()允许我们定位单个控件。我们将向此方法传递一个对象，并传递控件的名称及其值，如下所示

6) 我们访问我们的表单并访问我们的图像，然后调用updateValueAndValidity()方法。

updateValueAndValidity()方法通知angular我们更改了该值，它应该重新评估该值，在内部存储该值，并检查我修补的值是否有效。即使该用户从未直接在那里键入，它也会在此输入上运行验证器。

7) 现在，我们需要向用户预览存储的图像。为了预览我们的图像，我们需要在图像选择器的下面的HTML代码中添加一些内容。我们将在此处添加一个div并为其指定一个CSS类，名称由您决定。

8) 在div中，我们将添加一个普通的图像元素，并且我们必须通过src来绑定它。我们还将按以下方式设置标题。

9) 现在，我们需要在div中显示图像。为此，我们需要将文件转换为可以显示的内容。我们将返回到我们的PickedImage()方法，在这里我们将图像转换为所谓的data URL，这是一个可以被普通图像标签使用的URL。我们将创建一个新的类型为string的属性。之后，我们将使用JavaScript功能，即FileReader。我们将在PickedImage()方法中创建一个新的常量属性，并存储FileReader的新实例，因为我们必须实例化该实例或将其存储在该reader常量中。

10) 现在，我们将使用该reader常量并定义onload事件。此事件将是一个函数，当它完成加载某个资源时，该函数将被执行。在此函数中，我们将reader的结果存储在之前创建的Pickedimage属性中。

11) 除非我们告诉它做某事，否则它不会做任何事情。因此，我们将调用reader的readAsDataURL()方法，并将我们的文件作为参数传递，如下所示

12) 现在，我们将返回到我们的HTML代码，并在div中使用*ngIf并检查Pickedimage是否不等于空字符串，以及图像预览是否不为null，如下所示

因此，如果Pickedimage存在并且不等于空字符串，则将加载div。

13) 我们会将图像的src标签绑定到要显示的图像Pickedimage。

14) 现在它看起来会很丑陋，因此我们将返回到我们的CSS文件并使用CSS代码来样式化image-preview类和image-preview img。我们将在CSS文件中添加以下代码行

现在，我们保存所有文件，然后尝试从图像选择器中选择一张图片。

一切运作良好，在下一节中，我们将了解Mime-Type验证器。