本文详细介绍了在文件上传组件中，如何利用javascript的`image`对象和`url.createobjecturl`方法来获取上传图片的宽度和高度，进而实现客户端的图片尺寸验证。教程涵盖了异步和基于promise的同步化获取尺寸方案，并提供了完整的代码示例，指导开发者构建健壮、用户友好的图片尺寸验证逻辑。
在现代Web应用中，文件上传功能是常见的需求，尤其当涉及到图片上传时，往往需要对图片的尺寸进行限制，以保证页面布局和服务器存储的合理性。本文将深入探讨如何在客户端（浏览器端）高效且可靠地获取上传图片的尺寸，并将其集成到文件验证逻辑中。
1. 理解文件对象与图片加载机制
当用户通过选择文件后，我们可以获取到一个File对象。这个File对象包含了文件的基本信息，如名称、大小、类型等，但它并不直接提供图片的宽度和高度。要获取这些图像特有的属性，我们需要将File对象加载为一个实际的图像。
JavaScript中，可以通过以下步骤实现：
- 创建对象URL: 使用URL.createObjectURL(file)方法为File对象创建一个临时的、可访问的URL。这个URL指向浏览器内存中的文件数据。
- 创建Image对象: 实例化一个Image对象。
- 设置Image源: 将Image对象的src属性设置为之前创建的对象URL。
- 监听加载事件: 图片加载是异步操作，需要通过监听Image对象的onload事件来获取其width和height属性。
- 释放对象URL: 图片加载完成后，为了避免内存泄漏，应调用URL.revokeObjectURL()方法释放之前创建的对象URL。
2. 异步获取图片尺寸
最直接的方式是使用onload事件回调，但这本质上是一个异步操作。
/**
* 异步获取图片的宽度和高度。
* @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);这种异步方法适用于那些不需要立即返回尺寸结果的场景，例如在图片预览时显示尺寸信息。然而，对于需要在文件上传验证器中“同步”判断尺寸的场景，这种纯异步回调的方式会带来挑战，因为验证器通常需要立即返回一个验证结果。
3. 基于Promise的同步化尺寸获取
为了在验证器等需要等待结果的场景中使用，我们可以将异步的图片加载过程封装到一个Promise中，从而实现类似同步的调用效果（通过async/await）。
/**
* 通过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);4. 集成到文件上传验证器
现在，我们可以将上述getDimensions方法集成到文件上传的尺寸验证器中。由于getDimensions返回一个Promise，我们的验证器函数也需要是异步的（即返回Promise
假设我们有一个IUploadFileControl接口定义了文件上传控件的值结构，其中allFiles是一个File数组。
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 => {
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)])
// }); 5. 注意事项与最佳实践
- 异步验证器的处理: 异步验证器会使表单控件在验证期间处于pending状态。在用户界面中应提供适当的加载指示，以提升用户体验。
- 错误处理: getDimensions方法中包含了onerror回调和try/catch块，以处理图片加载失败的情况。在实际应用中，应根据业务需求决定是将其视为验证失败，还是允许非图片文件或损坏的图片通过（如果尺寸不是强制要求）。
- 内存管理: URL.createObjectURL创建的URL会占用浏览器内存，务必在图片加载完成后通过URL.revokeObjectURL释放。
- 性能考量: 如果用户上传大量图片，为每个图片创建Image对象并等待其加载可能会影响性能。对于极端情况，可以考虑限制一次性验证的图片数量，或者在服务器端进行最终的尺寸验证。
- 客户端与服务器端验证: 客户端验证主要是为了提供即时反馈，优化用户体验。然而，出于安全和数据完整性考虑，务必在服务器端也进行相同的图片尺寸及其他文件属性的验证，以防止恶意用户绕过客户端检查。
- 用户反馈: 当验证失败时，应向用户提供清晰、友好的错误信息，例如“图片宽度不能超过1920像素”。
总结
通过URL.createObjectURL和Image对象，我们可以在客户端有效地获取上传图片的尺寸。结合Promise和async/await，可以将这个异步过程封装成易于在验证器中使用的“同步”模式。在实现过程中，务必关注内存管理、错误处理以及用户体验，并牢记客户端验证只是第一道防线，服务器端验证同样不可或缺。
