12、构建照片画廊：MEAN 栈的实现之旅

构建照片画廊：MEAN 栈的实现之旅

1. 前端文件上传与预览功能实现

在前端开发中，实现文件上传与预览功能是构建照片画廊的重要一步。当我们确定上传的文件有效时，会使用 FileReader 读取图像并将其转换为 DataURL 格式，然后添加到模型中。以下是具体的代码实现：

const reader = new FileReader();
reader.onload = (evt) => {
  imageModel.Image = reader.result;
  resolve(imageModel);
};
reader.readAsDataURL(file);

在对话框中使用预览服务时，我们通过依赖注入将服务传递给构造函数。依赖注入是 Angular 的一项强大功能，它允许我们告知 Angular 类所需的依赖，而无需手动实例化这些对象。以下是相关代码：

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