场景说明

很多时候需要对上传的图片进行信息校验，例如文件大小，图片名称、长宽等属性

文件大小、名称通过 file 对象本身就可以获得到。 图片的长、宽则需要通过读取图片本身获取

代码示例

js
// 假设这里已经拿到了上传文件 file

//读取图片数据
const reader = new FileReader();
reader.onload = function (e:any) {
  const data = e.target.result;
  //加载图片获取图片真实宽度和高度
  const image = new Image();
  image.src = data;
  // 因为 image 不是赋予属性就可以直接拿到长宽属性的，所以要加上监听
  image.onload = function () {
    const width = image.width;
    const height = image.height;
    const sizeAllow = width <= 1024 && height <= 1024;
    if (sizeAllow) {
      // 触发上传
    } else {
      Modal.warning({
        title: '提示',
        content: '上传图片长宽不可超过 1024px',
      })
    }
  };
};
reader.readAsDataURL(file);