antd 中 Upload 上传图片宽高限制以及上传文件的格式限制

一、上传图片的宽高限制
在组件Upload中有一个beforeUpload的API,是文件上传之前的钩子函数,我们需要在这个API中做限制

 
 beforeUpload: file => { 
	  this.handleFilebeforeUpload(file)
	     .then(() => { 
	       message.success(`上传成功`);
	     })
	     .catch(() => { 
	       Modal.error({ 
	         title: "上传图片的宽高不符合要求,请重传!(宽高不得超过1500)"
	       });
	     });
 },
 
handleFilebeforeUpload = file => this.checkImageWH(file, 1500, 1500);

 // 上传图片尺寸限制
checkImageWH(file, width, height) {  // 参数分别是上传的file,想要限制的宽,想要限制的高
    return new Promise(function(resolve, reject) { 
      let filereader = new FileReader();
      filereader.onload = e => { 
        let src = e.target.result;
        const image = new Image();
        image.onload = function() { 
          if (this.width >= width && this.height >= height) {  // 上传图片的宽高与传递过来的限制宽高作比较,超过限制则调用失败回调
            reject();
          } else { 
            resolve();
          }
        };
        image.onerror = reject;
        image.src = src;
      };
      filereader.readAsDataURL(file);
    });
  }

二 、上传文件的格式限制,
在组件Upload中上传文件的格式限制有两种方法

  1. API : accept
    接收类型字符串,将想要接收的类型拼接字符串并使用英文逗号隔开
 accept: ".bmp,.gif,.png,.jpeg,.jpg",
  1. 与上文限制图片宽高类似,在API beforeUpload中做验证
 beforeUpload: file => { 
    if (file.type !== "image/png" && file.type !== "image/jpeg") { 
      message.error("仅支持上传jpg/png格式的文件");
     }
    return file.type === "image/png" || file.type === "image/jpeg";
}

    原文作者:See you
    原文地址: https://blog.csdn.net/Mine____/article/details/109332591
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞