在MEAN Stack中更新带有图像的数据

在之前的章节中，我们成功地上传了图像并返回到前端。现在，如果我们尝试更新一个帖子，它会给我们一个错误，因为没有imagePath。为了更新帖子，我们将使用以下步骤

1) 我们将回到我们post-create组件的typescript文件。在这里，我们没有任何地方可以编辑现有的图像。当我们创建一个新表单时，我们总是将null作为图像的起始值。当我们添加一个图像时，我们想使用我们的imagepath。所以，我们将以以下方式设置图像的值

现在，如果我们提交这个，updatePost()方法将被执行。在这个方法中，我们必须区分两种情况，我们是否有一个 "string image"？因为如果我们得到一个 "string image"，我们只想发送一个JSON请求，如果我们得到一个对象或文件，我们想把它作为表单数据上传。这将是一个put请求，但payload会简单地不同。

2) 在updatePost()方法中，我们期望这个函数能得到我们的图像，所以我们需要将图像作为参数传递，它可以是File类型或字符串类型，像这样

3) 现在，我们将移除post常量并检查它是什么。在那之前，我们将回到我们post create组件的typescript文件，并将图像传递给updatePost方法，像这样

4) 现在，我们将使用typeof检查图像的类型，像这样

5) 所以，如果我们有一个对象，我们将使用FormData()对象创建我们的new postData，并使用append()函数来添加字段，像这样

6) 当我们的图像是字符串类型时，else部分将被执行。我们将创建一个新的postData，它的类型是post，它只是一个JavaScript对象，其中我们有title、content、id和imagePath属性，像这样

7) 我们将postData初始化为一个变量，而不是一个常量，这样typescript就可以理解它，像这样

8) 在http请求中，我们用postData代替post，对于id，我们将简单地使用id，而不是使用post.id，我们想要存储为更新帖子的post将是我们需要创建的post。

9) 在上面的代码中，我们可以看到imagePath有一个错误。我们也需要对endpoint做一些工作。所以，我们将回到我们的posts.js文件，并在那个put endpoint上工作。我们在post endpoint中使用了multer，所以我们将简单地从这里复制逻辑并将其添加到put endpoint以在那里提取文件。

10) 现在，在我们的函数中，我们想要存储我们上传的文件，但这取决于我们是获得一个新文件还是只是获得一个字符串。首先，我们将回到我们的mime-type验证器，并在其开头添加一个检查。我们将检查value的类型。如果它是字符串类型，我们需要返回一个observable。我们将从rxjs导入"of"，它可以快速轻松地添加或创建一个立即发出数据的observable。在这里，我们将简单地返回 of(null)，像这样

11) 当我们在ngOnInit中初始化post时，我们正在访问我们服务中的getPost()。在getPost()中，我们正在向给定帖子的URL发送一个get请求，但我们没有获得imagePath。我们操作http get请求并期望imagePath是字符串类型，像这样

12) 现在，我们将进入我们的post.js文件，并在这里对我们单个帖子的get请求进行一些更改，因为它将包含我们从数据库中获取的图像路径。所以，图像路径将是响应的一部分，但我们然后在post-service中返回它，我们没有在我们的post-create组件中处理它。之前，我们将imagePath设置为null，所以我们将用postData.imagePath更改它，像这样

13) 现在，我们回到我们的post.js文件并访问我们的put路由。在这里，在函数中，我们将检查request.file。如果文件存在，我们知道上传了一个新文件。所以，在这里我们将使用我们在post路由中使用的逻辑，像这样

imagePath的默认值将从body中获得。

14) 当我们创建一个新帖子时，我们也使用imagePath，像这样

一切都完成了。现在我们将尝试通过选择一个新文件和不选择一个新文件来编辑一个帖子。

现在，我们将尝试通过选择一个新图像来更新这个New Image Post。

当我们点击Save Post按钮时，我们将得到以下错误

为了解决这个错误，我们需要回到我们的posts.service.ts文件，在那里我们创建了updatePost()方法。在这里，我们还需要在我们的postData中附加id。所以，我们将id附加到postData，保存所有文件，并再次尝试更新一个帖子。

从下一节开始，我们将开始一个新的模块。在这个模块中，我们将学习关于分页及其概念。

下载完整项目（Updating data with image.zip）