在 MEAN Stack 中使用文件 URL

在上一节中，我们成功地将上传功能添加到了我们的 Angular 应用程序中。文件上传功能正常工作，但我们还有很多工作要做。在服务器端的 posts.js 文件（位于我们的路由中）中，我们有 multer 代码。但是我们没有使用我们存储的文件，也没有对该文件做任何处理。我们没有将路径存储在数据库中，也没有将路径传递回给用户。

现在，为了做到这一点，我们可以利用 multer 为我们做的事情。它为我们提供了有关存储在处理函数中请求正文中的文件的信息。

1) 因此，当我们创建一个想要存储在数据库中的新帖子时，我们也可以存储一个图像路径。此图像路径是我们的模型不期望的。因此，我们将回到我们的帖子模型并向其添加一个新字段。我们将添加 imagePath 字段，它的类型是字符串，并且是必需的。

它将是我们后端上文件的路径。

2) 将 imagePath 字段添加到帖子模型后，我们将回到我们的帖子路由，在那里我们正在创建一个帖子。我们将添加另一个字段，即 imagePath，它应该是我们想要存储的文件的 URL。

我们将获取服务器的 URL 并将其存储在 URL 常量中以构造该 URL。我们可以从请求中获取它，并且有一个协议属性，该属性返回我们是否正在使用 HTTP 或 HTTPS 访问服务器，然后我们将添加 "://" 来创建一个完整的 URL，然后我们可以通过以下方式获取我们当前的主机

3) 这构造了到我们服务器的 URL，我们希望拥有它，因为我们的 imagePath 将是我们的 URL，然后是 "/images/"

"/images" 是我们存储文件的地方。 我们将其存储在后端 images 中，但我们将配置此文件夹，以便在我们的域之后直接访问。

4) 因此，我们只是希望能够输入我们的 "domain/images,"，然后添加文件名，这就是 multer 为我们所做的事情。

这是我们想要存储在数据库中的图像路径。

5) 我们返回一个响应，在那里，我们不只是想返回帖子 ID。 我们想返回整个帖子。 因此，我们将创建一个作为 JavaScript 对象返回的帖子，如下所示

执行此操作的最短方法之一是使用下一代 JavaScript 功能来创建一个新对象。 然后我们使用扩展运算符复制另一个对象的所有属性，然后我们只需添加或覆盖一些选定的属性，例如这样

6) 现在，我们将在 post.service.ts 文件中的客户端上使用它。 我们将访问 addPost()，在这里，我们获得的数据将是类型为 Post 的 post 属性。 之后，我们像这样提取帖子的 id、标题和内容

7) imagePath 是我们的前端模型未反映的内容。 因此，我们将转到 post.model.ts 文件并将 imagePath 添加到此处，如下所示

8) 现在，当我们在 posts.service.ts 文件中创建一个新帖子时，我们必须使用它。 在这里，我们将 imagePath 设置为 responseData.post.imagePath，如下所示

9) 我们将在 updarePost() 方法中收到一个错误，并且在这里我们还没有 imagePath，所以我们现在将其设置为 null。

10) 以相同的方式，我们也会在我们的 post-create.component.ts 文件中收到一个错误。 在这里，我们现在也将 imagePath 属性设置为 null。

现在，我们正在取回该帖子信息，并且正在使用它来存储在前端的新创建帖子中。

11) 现在，当我们访问消息页面时获取帖子时，我们也会转换帖子。 我们还将像这样设置 imagePath 属性

因此，现在我们也将在前端添加此 imagePath，我们将从后端返回数据。 在下一节中，我们将确保我们在屏幕上或前端渲染此图像路径。