12、构建基于MEAN栈的图片画廊

构建基于MEAN栈的图片画廊

1. 图片预览与对话框处理

在处理图片上传时，当确认文件有效后，我们要将文件名设置到模型中，并使用 FileReader 以 readAsDataURL 方式读取图片。读取完成后， onload 事件被触发，我们可以将图片数据添加到模型中并解析承诺。示例代码如下：

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

在对话框中使用预览服务，我们需要将服务注入到构造函数中。同时，添加对话框引用以及在HTML模板中使用的声明：

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

为了接受文件选择