美文网首页
上传图片资源时限制宽高

上传图片资源时限制宽高

作者: 燕自浩 | 来源:发表于2023-08-28 15:38 被阅读0次
前言:如果在开发需求中遇到需要控制上传图片资源的宽、高、以及宽高比时可以使用下面的代码来完成校验,以下案例代码只有限制宽和高。

同时可以在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);
  });
};

相关文章

网友评论

      本文标题:上传图片资源时限制宽高

      本文链接:https://www.haomeiwen.com/subject/hlbgmdtx.html