antd upload上传图片限制图片类型大小以及宽高尺寸

文章介绍了在前端开发中,如何使用JavaScript实现图片上传功能的预处理,包括检查文件类型、宽高比例(限制为670x320)以及大小不超过10MB的限制。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<a-upload
:before-upload="beforeUpload"
  >
  // 上传图片宽高比例限制
  const beforeUpload = file => {
    return new Promise((resolve, reject) => {
      // // 图片类型限制
      // let isJpgOrPng = file.type === 'image/png' || file.type === 'image/jpg';
      // if (!isJpgOrPng) {
      //   message.error('格式错误,只能上传jpg、jpeg、png');
      //   return reject(false);
      // }

      // 图片宽高比例限制
      let w = 0,
        h = 0;
      let reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => {
        const image = new Image();
        image.src = reader.result;
        image.onload = () => {
          w = image.width;
          h = image.height;
          const ratio = 670 / 320;
          if (w / h == ratio) {
            // 图片比例为670*320横纵比一致
            return resolve(true);
          } else {
            message.error('图片尺寸错误,只能上传670x320横纵比一致的图片');
            return reject(false);
          }
        };
      };
      // 图片大小限制
      let isLt1M = file.size / 10240 / 10240 <= 1;
      if (!isLt1M) {
        message.error('图片大小超过10MB!');
        return reject(false);
      }
      // return isJpgOrPng && isLt1M; // 限制宽高比例、大小及类型
      return isLt1M; // 只限制宽高和大小
    });
  };

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值