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

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

1. 前端图片处理与对话框实现

在前端处理图片时，当确定文件有效后，会使用文件名设置模型中的名称，并利用 FileReader 的 readAsDataURL 方法读取图像。读取完成后，触发 onload 事件，将图像数据添加到模型中，代码如下：

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

在对话框中使用预览服务时，需要将服务注入到构造函数中，同时添加对话框引用和相关声明：

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

创建方法 OnImageSele