JavaScript/TypeScript 文件上传：实现图片尺寸验证教程

// 假设 x 是一个 File 对象
if (x?.type.includes('image/')) {
  const url = URL.createObjectURL(x); // 创建一个临时的对象 URL
  const img = new Image();

  img.onload = function () {
    console.log(`图片宽度: ${img.width}, 图片高度: ${img.height}`);
    URL.revokeObjectURL(img.src); // 释放内存
  };

  img.onerror = function () {
    console.error('图片加载失败');
    URL.revokeObjectURL(img.src); // 即使失败也要释放
  };

  img.src = url; // 设置图片源，开始加载
}

/**
 * 从 File 对象中异步获取图片的宽度和高度。
 * @param file - 要获取尺寸的 File 对象。
 * @returns 一个 Promise，解析为包含 width 和 height 的对象。
 */
function getDimensions(file: File): Promise<{ width: number; height: number }> {
  return new Promise((resolve, reject) => {
    if (!file.type.includes('image/')) {
      reject(new Error('非图片文件'));
      return;
    }

    const url = URL.createObjectURL(file);
    const img = new Image();

    img.onload = () => {
      URL.revokeObjectURL(img.src); // 释放内存
      resolve({ width: img.width, height: img.height });
    };

    img.onerror = () => {
      URL.revokeObjectURL(img.src); // 即使加载失败也要释放
      reject(new Error('图片加载失败或无法获取尺寸'));
    };

    img.src = url;
  });
}

import { AbstractControl, AsyncValidatorFn, ValidationErrors } from '@angular/forms';

// 假设 IUploadFileControl 是你的文件上传控件值类型，allFiles 包含 File 数组
interface IUploadFileControl {
  allFiles: File[];
  // ...其他属性
}

const VALIDATION_LABEL_ATTACHMENT_MAX_SIZE = '文件大小超出限制';
const VALIDATION_LABEL_IMAGE_DIMENSIONS = '图片尺寸不符合要求';

/**
 * 从 File 对象中异步获取图片的宽度和高度。
 * @param file - 要获取尺寸的 File 对象。
 * @returns 一个 Promise，解析为包含 width 和 height 的对象。
 */
function getDimensions(file: File): Promise<{ width: number; height: number }> {
  return new Promise((resolve, reject) => {
    if (!file.type.includes('image/')) {
      // 如果不是图片，直接拒绝或返回默认值，取决于业务需求
      reject(new Error('非图片文件'));
      return;
    }

    const url = URL.createObjectURL(file);
    const img = new Image();

    img.onload = () => {
      URL.revokeObjectURL(img.src);
      resolve({ width: img.width, height: img.height });
    };

    img.onerror = () => {
      URL.revokeObjectURL(img.src);
      reject(new Error('图片加载失败或无法获取尺寸'));
    };

    img.src = url;
  });
}

/**
 * 异步文件上传验证器，检查文件大小和图片尺寸。
 * @param maxFileSize - 允许的最大文件大小（字节）。
 * @param maxWidth - 允许的最大图片宽度。
 * @param maxHeight - 允许的最大图片高度。
 * @returns 一个 AsyncValidatorFn。
 */
export const filesDimensionAndSizeValidator =
  (maxFileSize: number, maxWidth: number, maxHeight: number): AsyncValidatorFn =>
  async (control: AbstractControl): Promise<ValidationErrors | null> => {
    const value: IUploadFileControl = control.value;

    if (value == null || value.allFiles.length === 0) {
      return null; // 没有文件，无需验证
    }

    for (const x of value.allFiles) {
      // 1. 文件大小验证
      if (x.size > maxFileSize) {
        return { file_max_size: VALIDATION_LABEL_ATTACHMENT_MAX_SIZE };
      }

      // 2. 图片尺寸验证 (仅对图片文件)
      if (x.type.includes('image/')) {
        try {
          const { width, height } = await getDimensions(x);
          if (width > maxWidth || height > maxHeight) {
            return { image_dimensions: VALIDATION_LABEL_IMAGE_DIMENSIONS };
          }
        } catch (error) {
          // 可以在这里处理图片加载失败的情况，例如返回一个特定的错误
          console.error(`处理文件 ${x.name} 时出错:`, error);
          // return { image_processing_error: '图片处理失败' };
          // 或者，如果图片加载失败不应阻止上传，则忽略此错误并继续
        }
      }
    }

    return null; // 所有文件通过验证
  };

import { FormBuilder, Validators } from '@angular/forms';

// ...
constructor(private fb: FormBuilder) {
  this.uploadForm = this.fb.group({
    // 假设 'fileUploader' 是你的文件上传控件名称
    fileUploader: [
      null,
      // 同步验证器（如果需要）
      // [Validators.required],
      // 异步验证器
      [filesDimensionAndSizeValidator(5 * 1024 * 1024, 1920, 1080)] // 5MB, 1920x1080
    ]
  });
}
// ...