前言:如果在开发需求中遇到需要控制上传图片资源的宽、高、以及宽高比时可以使用下面的代码来完成校验,以下案例代码只有限制宽和高。
同时可以在resolve
,reject
中抛出自己所需要的东西,参数file
是上传的资源,width
是需要限制的宽度,height
是需要限制的高度,本案例是react + antd
RcFile
的来源是import type { RcFile } from 'antd/es/upload/interface';
// 上传图片尺寸限制
export const checkIconWH = (file: RcFile, width: number, height: number) => {
return new Promise<void>((resolve, reject) => {
const fileReader = new FileReader();
fileReader.onload = (e: any) => {
const image = new Image();
image.onload = () => {
if (image.width !== width && image.height !== height) {
reject();
} else {
resolve();
}
};
image.onerror = reject;
image.src = e?.target?.result;
};
fileReader.readAsDataURL(file);
});
};
网友评论