JavaScript/TypeScript中实现上传图片尺寸验证的专业指南

function getDimensionsAsync(file: File): void {
  // 检查文件类型，确保是图片
  if (!file.type.includes('image/')) {
    console.warn('非图片文件，跳过尺寸获取。');
    return;
  }

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

  img.onload = function() {
    console.log(`图片尺寸：宽度 ${img.width}px, 高度 ${img.height}px`);
    // 释放URL对象，避免内存泄漏
    URL.revokeObjectURL(img.src);
  };

  img.onerror = function() {
    console.error('图片加载失败，无法获取尺寸。');
    URL.revokeObjectURL(img.src); // 即使加载失败也要释放资源
  };

  img.src = url;
}

// 示例用法：假设你有一个File对象
// const uploadedFile: File = ...;
// getDimensionsAsync(uploadedFile);

/**
 * 获取图片文件的尺寸（宽度和高度）。
 * @param file 图片文件对象。
 * @returns 一个Promise，解析为包含宽度和高度的对象，或在加载失败时拒绝。
 */
function getDimensions(file: File): Promise<{ width: number; height: number }> {
  return new Promise((resolve, reject) => {
    // 再次强调，可以先进行文件类型检查
    if (!file.type.includes('image/')) {
      return reject(new Error('提供的文件不是图片类型。'));
    }

    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;
  });
}

// 示例用法：在异步函数中使用
async function validateImageDimensions(file: File, maxWidth: number, maxHeight: number): Promise<boolean> {
  try {
    const { width, height } = await getDimensions(file);
    console.log(`获取到图片尺寸：${width}x${height}`);
    if (width > maxWidth || height > maxHeight) {
      console.error(`图片尺寸超出限制：最大 ${maxWidth}x${maxHeight}`);
      return false;
    }
    return true;
  } catch (error) {
    console.error('获取图片尺寸时发生错误:', error.message);
    return false; // 视为验证失败
  }
}

// const someImageFile: File = ...;
// validateImageDimensions(someImageFile, 1920, 1080).then(isValid => {
//   console.log('图片是否有效:', isValid);
// });

import { AbstractControl, ValidatorFn, ValidationErrors } from '@angular/forms'; // 示例，可替换为其他框架或纯JS

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

// 定义错误标签，可根据实际项目调整
const VALIDATION_LABEL_ATTACHMENT_MAX_SIZE = '文件大小超出限制';
const VALIDATION_LABEL_IMAGE_DIMENSIONS = '图片尺寸超出限制';
const VALIDATION_LABEL_INVALID_IMAGE_TYPE = '文件类型不是图片';

/**
 * 异步获取图片尺寸的辅助函数
 */
function getDimensions(file: File): Promise<{ width: number; height: number }> {
  return new Promise((resolve, reject) => {
    if (!file.type.includes('image/')) {
      return reject(new Error('非图片文件。'));
    }
    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 ValidatorFn
 */
export const filesDimensionAndSizeValidator =
  (maxWidth: number, maxHeight: number, maxFileSize: number): ValidatorFn =>
  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 (file.size > maxFileSize) {
        return { file_max_size: VALIDATION_LABEL_ATTACHMENT_MAX_SIZE };
      }

      // 2. 图片类型和尺寸验证
      if (file.type.includes('image/')) {
        try {
          const { width, height } = await getDimensions(file);
          if (width > maxWidth || height > maxHeight) {
            return { image_dimensions: VALIDATION_LABEL_IMAGE_DIMENSIONS };
          }
        } catch (error) {
          // 如果获取尺寸失败，通常也视为验证失败或给出特定错误
          console.error(`处理图片 ${file.name} 时出错:`, error);
          return { invalid_image: (error as Error).message || '无法验证图片尺寸' };
        }
      } else {
        // 如果需要，可以添加非图片文件的验证逻辑，例如只允许图片
        // return { invalid_file_type: '只允许上传图片文件' };
      }
    }

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

// 示例用法 (Angular Form Control):
// myFormControl = new FormControl(null, [
//   filesDimensionAndSizeValidator(1920, 1080, 5 * 1024 * 1024) // 最大宽度1920，最大高度1080，最大文件5MB
// ]);