前言:如果在開發(fā)需求中遇到需要控制上傳圖片資源的寬赂苗、高屈糊、以及寬高比時(shí)可以使用下面的代碼來(lái)完成校驗(yàn)钱烟,以下案例代碼只有限制寬和高。
同時(shí)可以在resolve
,reject
中拋出自己所需要的東西眶俩,參數(shù)file
是上傳的資源莹汤,width
是需要限制的寬度,height
是需要限制的高度,本案例是react + antd
RcFile
的來(lái)源是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);
});
};