文件上传是web应用中常见的交互功能，而对上传文件的类型、大小乃至尺寸进行验证，是确保数据质量和用户体验的关键环节。特别是在处理图片上传时，限制图片的尺寸（宽度和高度）变得尤为重要。本教程将深入探讨如何在客户端，特别是使用 javascript/typescript 环境下，实现对上传图片尺寸的有效验证。
核心原理：获取图片尺寸
在浏览器环境中，要获取一个本地文件（File 对象）的图片尺寸，我们不能直接从 File 对象本身获取。需要借助 Image 对象和 URL.createObjectURL 方法。
-
URL.createObjectURL(file): 这个方法会创建一个 DOMString，其中包含一个 URL，该 URL 可用于表示 File 或 Blob 对象的内容。这个 URL 是一个临时的、唯一的 URL，可以像常规 URL 一样在
标签的 src 属性中使用。
- new Image(): 创建一个 Image 对象，然后将其 src 属性设置为通过 URL.createObjectURL 生成的 URL。
- img.onload: 当图片成功加载后，Image 对象的 width 和 height 属性就会包含图片的实际尺寸。由于图片加载是一个异步过程，因此我们需要在 onload 事件中获取尺寸。
- URL.revokeObjectURL(url): 为了释放内存，一旦图片尺寸获取完毕，应立即调用 URL.revokeObjectURL 来撤销之前创建的对象 URL。
以下是获取图片尺寸的基础代码示例：
// 假设 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; // 设置图片源，开始加载
}封装异步尺寸获取为可等待方法
由于 img.onload 是一个异步回调，直接在同步的验证器中使用会比较困难。为了更好地集成到现代 JavaScript/TypeScript 的异步流程中，我们可以将这个过程封装成一个返回 Promise 的方法。这样，我们就可以使用 async/await 来“同步”地等待尺寸结果。
/**
* 从 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;
});
}集成图片尺寸验证到文件上传验证器
在前端框架（如 Angular）中，验证器通常是同步函数，返回 ValidationErrors | null。然而，获取图片尺寸是一个异步操作。因此，如果要在验证器内部执行此操作，该验证器本身也需要是异步的，即返回 Promise
立即学习“Java免费学习笔记（深入）”；
下面我们将创建一个异步验证器，它将结合文件大小验证和图片尺寸验证。
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; // 所有文件通过验证
};使用示例：
在 Angular 的 FormBuilder 或 FormControl 中使用此异步验证器：
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
]
});
}
// ...注意事项与最佳实践
- 异步验证处理: 务必理解 AsyncValidatorFn 的工作方式。异步验证器会返回一个 Promise 或 Observable。当验证器正在等待结果时，表单控件会处于 pending 状态。
- MIME 类型检查: 在尝试获取图片尺寸之前，始终通过 file.type 属性检查文件是否确实是图片（例如 file.type.includes('image/')）。这可以避免对非图片文件创建 Image 对象而导致的错误或不必要的处理。
- 内存管理: 及时调用 URL.revokeObjectURL(img.src) 是非常重要的。每次调用 URL.createObjectURL 都会在内存中创建一个新的对象引用。如果不及时释放，尤其是在用户上传大量文件或反复上传时，可能导致内存泄漏。
- 用户体验: 图片尺寸验证可能需要一些时间（取决于图片大小和网络状况，尽管对于本地文件通常很快）。在验证过程中，可以向用户显示加载指示器，以避免用户困惑。
- 错误处理: 在 getDimensions 方法中，我们添加了 onerror 处理和 try...catch 块来捕获图片加载失败或其他处理错误。根据业务需求，你可以选择在图片加载失败时返回特定的验证错误，或者仅仅记录错误并允许上传（如果图片尺寸不是强制验证项）。
- 多文件处理: 如果上传组件支持多文件，确保你的验证器能遍历所有文件并独立进行验证。上述示例已经包含了对 allFiles 数组的遍历。
- 性能考虑: 对于极大量的图片文件，同步地等待每一个 getDimensions Promise 可能会导致短暂的 UI 阻塞或验证时间过长。在这种情况下，可以考虑使用 Promise.all 并行处理，或者在后台工作线程（Web Worker）中处理，以避免阻塞主线程。
总结
通过 Image 对象和 URL.createObjectURL 结合 Promise 封装，我们能够有效地在客户端实现对上传图片尺寸的精确验证。将这个异步逻辑集成到前端框架的异步验证器中，可以确保在文件上传前就满足所有预设的尺寸要求，从而提升应用的数据质量和用户体验。在实现过程中，关注 MIME 类型检查、内存管理和错误处理等最佳实践，将使你的文件上传功能更加健壮和高效。
