如何在Aurelia-Typescript上传前检查图片的大小和扩展名？

<input type="file" id="imageFile" (change)="handleFileChange($event)" />

handleFileChange(event: Event) {
  const fileInput = event.target as HTMLInputElement;
  const file = fileInput.files[0];
  
  // 检查文件大小和扩展名
  if (this.validateFile(file)) {
    // 执行上传操作
    this.uploadFile(file);
  } else {
    // 文件不满足条件，给出相应提示
    alert("请上传符合要求的图片文件！");
  }
}

validateFile(file: File): boolean {
  const allowedExtensions = ["jpg", "jpeg", "png"];
  const maxSizeInBytes = 10 * 1024 * 1024; // 10MB
  
  // 检查文件扩展名
  const extension = file.name.split(".").pop()?.toLowerCase();
  if (!allowedExtensions.includes(extension)) {
    return false;
  }
  
  // 检查文件大小
  if (file.size > maxSizeInBytes) {
    return false;
  }
  
  return true;
}

uploadFile(file: File) {
  // 在此处调用相应的文件上传接口，将file作为参数传递给后端处理
  // 例如：
  // this.fileService.uploadImage(file).subscribe(response => {
  //   console.log("文件上传成功！");
  // });
}