在 MEAN Stack 的 Angular 中添加上传功能

在之前的章节中，我们成功地在服务器上添加了上传功能，但我们没有对其进行测试，因为要测试我们的服务器端上传功能，我们需要在 angular 上添加上传功能。因此，在本节中，我们将向我们的前端或 angular 添加上传功能。我们将使用以下步骤来完成此操作

1) 我们将回到我们的 posts.service.ts 文件，在这里，当我们添加帖子时，我们现在必须上传我们的文件。 我们想要发送一个包含我们的常规数据和文件的请求。 以前，我们使用了 post 方法并附加了 post，即对象，它会自动将其作为 JSON 发送到后端。 我们知道 JSON 不能包含文件，因此我们不会发送 JSON 数据，而是发送表单数据。 我们将删除 Post 类型的 post 属性，而是创建一个新的常量，即 postData。 这个常量将是一个新的 FormData 对象。

2) 这是一个由 JavaScript 提供的对象，FormData 基本上是一种数据格式，允许我们组合文本值和 blobs 或文件值。 我们通过访问 postData 来使用它，并且我们通过使用 append() 将字段附加到它。我们将使用 append() 函数添加标题和内容字段，方法如下

3) 现在，我们需要附加我们的图像。我们将使用 append() 函数，我们将给它一个名称，即 image。 这个“图像”是我们将在后端尝试访问的属性。 要传递图像，我们需要在 addPost() 函数中添加一个额外的参数，即 File 类型的图像，以获取我们的图像并在 append() 函数中传递，如下所示

4) 我们需要在这个 append() 函数中传递一个额外的参数，那就是我们提供给后端的文件名。 我们想要使用用户为帖子输入的标题，并记住，这将是文件名的一部分，因为它保存在后端，所以它不是微不足道的。

5) 我们将简单地将 postData 传递到 angular http 请求中，angular 会自动设置正确的标头，检测到我们获得了非 JSON 数据，并且 angular HTTP 客户端将处理所有这些。

6) 现在，在订阅中，我们需要确保我们仍然保存一个帖子。 为此，我们将创建一个新的 Post 类型的 post 属性，并分配 id、title 和 content，如下所示

7) 现在，这里缺少“this”，并且我们没有将图像传递给 addPost() 方法。 因此，我们将回到我们的 post-create.component.ts，在那里我们调用这个函数。 我们通过访问 this.form.value.image 来转发这个，如下所示

如果我们尝试上传文件并保存帖子，则帖子将成功保存，但图像将不会添加到 images 文件夹中。

8) 通过更改将存储传递到 js 文件中的 multer 函数的方式来解决这个问题。 我们需要在 multer() 函数中传递 JavaScript 对象。 这个对象有一个 storage 属性，它应该获取我们的存储配置，如下所示

现在，我们将尝试上传文件并保存帖子。

现在一切都正常工作，但是，我们仍然缺少一些东西。 我们没有告诉客户端存储在哪里，因为我们需要返回它，并且我们还想检查我们是否能够上传无效数据。

9) 在我们的 post-create.component.ts 文件中，我们暂时禁用了我们的前端验证，以提交任何我们忽略我们的 mime 类型验证结果的文件。

现在，如果我们保存这个并在上传文件后尝试添加一个新帖子，我们将得到一个很大的错误。

我们收到了无效的 mime 类型错误，因此这个验证工作正常。 我们没有在客户端上优雅地处理该错误，我们将在稍后执行此操作。 我们从前端验证中删除注释，但这表明验证在客户端服务器上工作，并且我们能够上传该文件。

在下一节中，我们将确保我们将文件信息也传递回客户端，以便我们可以使用它。