12、构建图片上传与管理系统：从前端到后端的全栈实现

构建图片上传与管理系统：从前端到后端的全栈实现

在开发一个图片上传与管理系统时，我们需要考虑多个方面，包括前端的用户交互、后端的服务器搭建以及数据库的存储和管理。下面将详细介绍如何实现这样一个系统。

1. 在对话框中使用服务

我们已经有了一个可用的预览服务，现在可以在对话框中使用它。为了使用该服务，我们需要将其传递给构造函数。由于该服务是可注入的，只要在构造函数中添加适当的引用，Angular 就会负责为我们注入它。同时，我们还需要添加对对话框本身的引用，以及一组将在相应 HTML 模板中使用的声明：

protected imageSource: IPictureModel | null;
protected message: any;
protected description: string;
protected tags: string;
constructor(
  private dialog: MatDialogRef<FileuploadComponent>,
  private preview: FilePreviewService
) { }

这种允许 Angular 自动构建带有依赖项的构造函数，而无需我们使用 new 显式实例化它们的技术称为依赖注入。简单来说，我们只需告诉 Angular 我们的类需要什么，然后让 Angular 来构建这些对象。

接下来，我们创建一个方法来接受文件上传组件的文件选择，并调用预览方法。使用 catch 进行防御性编程，以处理服务中的异常