文件上传中图片尺寸验证的实现指南

/**
 * 异步获取图片的宽度和高度。
 * @param file File对象
 */
const getDimensionsAsync = (file: File): void => {
  // 检查文件类型是否为图片
  if (file?.type.includes('image/')) {
    const url = URL.createObjectURL(file);
    const img = new Image();

    img.onload = function () {
      console.log(`图片尺寸: 宽度 ${img.width}, 高度 ${img.height}`);
      // 图片加载完成后，释放对象URL以节省内存
      URL.revokeObjectURL(img.src);
    };

    img.onerror = function () {
      console.error('图片加载失败');
      URL.revokeObjectURL(img.src);
    };

    img.src = url;
  } else {
    console.warn('非图片文件，无法获取尺寸。');
  }
};

// 示例用法 (假设你有一个File对象 'myImageFile')
// getDimensionsAsync(myImageFile);

/**
 * 通过Promise封装，以同步化方式获取图片的宽度和高度。
 * @param file File对象
 * @returns 返回一个Promise，解析为包含width和height的对象。
 */
const 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 = () => {
      // 图片加载成功，解析Promise并释放URL
      URL.revokeObjectURL(img.src);
      resolve({ width: img.width, height: img.height });
    };

    img.onerror = () => {
      // 图片加载失败，拒绝Promise并释放URL
      URL.revokeObjectURL(img.src);
      reject(new Error('图片加载失败或文件损坏。'));
    };

    img.src = url;
  });
};

// 示例用法 (在async函数中)
// async function processFile(file: File) {
//   try {
//     const dimensions = await getDimensions(file);
//     console.log(`图片尺寸: 宽度 ${dimensions.width}, 高度 ${dimensions.height}`);
//   } catch (error) {
//     console.error(error.message);
//   }
// }
// processFile(myImageFile);

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

// 假设文件上传控件的值接口
interface IUploadFileControl {
  allFiles: File[];
  // 其他属性...
}

/**
 * 获取图片的宽度和高度的Promise封装。
 * (与上一节的getDimensions函数相同，为了代码完整性再次提供)
 * @param file File对象
 * @returns 返回一个Promise，解析为包含width和height的对象。
 */
const 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 maxWidth 允许的最大宽度
 * @param maxHeight 允许的最大高度
 * @param maxFileSize 允许的最大文件大小 (可选，这里仅关注尺寸)
 * @returns 返回一个异步验证器函数
 */
export const filesDimensionValidator = (
  maxWidth: number,
  maxHeight: number,
  maxFileSize?: number
): AsyncValidatorFn => {
  return async (control: AbstractControl): Promise<ValidationErrors | null> => {
    const value: IUploadFileControl = control.value;

    if (!value || !value.allFiles || value.allFiles.length === 0) {
      return null; // 没有文件，视为通过验证
    }

    for (const file of value.allFiles) {
      // 1. 文件大小验证 (如果需要)
      if (maxFileSize && file.size > maxFileSize) {
        return { file_max_size: '文件大小超出限制' };
      }

      // 2. 图片尺寸验证
      if (file.type.includes('image/')) {
        try {
          const dimensions = await getDimensions(file);
          if (dimensions.width > maxWidth || dimensions.height > maxHeight) {
            return {
              image_dimensions_invalid: `图片尺寸超出限制 (最大宽度: ${maxWidth}px, 最大高度: ${maxHeight}px)`,
            };
          }
        } catch (error) {
          // 图片加载失败，可以视为验证失败或忽略（取决于业务需求）
          console.error(`图片 ${file.name} 尺寸获取失败:`, error.message);
          return { image_load_error: `无法获取图片 ${file.name} 的尺寸` };
        }
      }
      // 如果是非图片文件，或者不进行尺寸验证，则跳过
    }

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

// 示例用法 (在Angular FormGroup中)
// myForm = new FormGroup({
//   uploader: new FormControl(null, [], [filesDimensionValidator(1920, 1080, 5 * 1024 * 1024)])
// });