Angular中文件选择按钮点击后对话框两次弹出问题求助

你的问题核心是重复触发了文件选择逻辑：点击label激活原生file input时触发了uploadFile，而uploadFile里的uploadAndGetImageWithMaxSize方法本身会自动弹出文件选择对话框——相当于一次点击触发了两次文件选择请求，所以才会弹两次。第一次是原生input触发的，但此时服务没拿到正确文件；第二次是服务自身弹出的，这时候才正常工作。

下面提供两种可行的解决方案：

方案一：移除原生file input的change逻辑，直接通过label调用服务方法 #

这种方式最简单，完全依赖NgxImageCompressService的内置文件选择能力，不需要原生input的change事件。

修改HTML：

<label (click)="uploadFile()">
  Select File
</label>
<!-- 无需保留原生file input，服务会自行处理文件选择流程 -->

组件代码保持不变：

constructor(
  private ngxImageCompressService: NgxImageCompressService
) {}

uploadFile() {
  const MAX_MEGABYTE = 1;
  this.ngxImageCompressService
    .uploadAndGetImageWithMaxSize(MAX_MEGABYTE, true)
    .then(
      (result: string) => {
        // 处理压缩后的图片base64
      },
      (error: string) => {
        // 处理错误逻辑
      }
    );
}

方案二：保留原生file input，手动获取文件后调用压缩方法 #

适合需要自定义文件校验、提前处理文件的场景，避免服务重复弹出对话框。

修改HTML：

<label for="selectFile">
  Select File
</label>
<input
  type="file"
  id="selectFile"
  accept="image/jpg, image/jpeg"
  (change)="onFileSelected($event)"
  style="display: none"
/>

组件代码：

constructor(
  private ngxImageCompressService: NgxImageCompressService
) {}

onFileSelected(event: Event) {
  const file = (event.target as HTMLInputElement).files?.[0];
  if (!file) return;

  const MAX_MEGABYTE = 1;
  // 先将文件转为base64，再调用压缩方法
  this.convertFileToBase64(file).then(base64 => {
    // 可自定义压缩参数（质量、宽度、高度）
    this.ngxImageCompressService.compressFile(base64, -1, 50, 50)
      .then(compressedBase64 => {
        // 检查压缩后文件大小是否符合要求
        const sizeInMB = this.ngxImageCompressService.byteCount(compressedBase64) / (1024 * 1024);
        if (sizeInMB <= MAX_MEGABYTE) {
          // 处理符合大小的压缩图片
        } else {
          // 处理超过大小限制的情况
        }
      });
  });
}

// 辅助方法：将File对象转为base64字符串
private convertFileToBase64(file: File): Promise<string> {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result as string);
    reader.onerror = error => reject(error);
    reader.readAsDataURL(file);
  });
}

内容的提问来源于stack exchange，提问作者sapovnelaa