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

最新推荐文章于 2025-06-04 16:22:03 发布

努力进阶的快快~

最新推荐文章于 2025-06-04 16:22:03 发布

阅读量1.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue3 antd 文章标签：前端

本文链接：https://blog.youkuaiyun.com/m0_69439101/article/details/134877726

vue3 同时被 2 个专栏收录

20 篇文章

订阅专栏

antd

12 篇文章

订阅专栏

文章介绍了在前端开发中，如何使用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; // 只限制宽高和大小
    });
  };