Reactjs中如何在上传前校验图片的高度与宽度？

要在图片上传前校验宽高（支持固定/动态限制），可以通过FileReader读取图片文件，再利用Image对象获取实际尺寸后做校验，校验通过再执行上传逻辑。以下是具体实现：

1. 编写图片尺寸校验函数 #

这个函数支持动态传入最大宽高限制，返回Promise方便异步处理：

// 校验图片尺寸，默认限制200*200像素
const validateImageDimensions = (file, maxWidth = 200, maxHeight = 200) => {
  return new Promise((resolve, reject) => {
    const img = new Image();
    const reader = new FileReader();

    reader.onload = (e) => {
      img.src = e.target.result;
      // 图片加载完成后校验尺寸
      img.onload = () => {
        if (img.width > maxWidth || img.height > maxHeight) {
          reject(new Error(`图片尺寸不能超过${maxWidth}*${maxHeight}像素`));
        } else {
          resolve({ width: img.width, height: img.height });
        }
      };
      // 图片加载失败处理
      img.onerror = () => reject(new Error('无法读取图片文件'));
    };

    // 文件读取失败处理
    reader.onerror = () => reject(new Error('文件读取失败'));
    reader.readAsDataURL(file);
  });
};

2. 修改上传函数，加入前置校验 #

在你的createOfficer函数中，先对图片做尺寸校验，校验通过再执行上传：

const createOfficer = async () => {
  // 若存在图片文件，先做尺寸校验
  if (newOfficerData.image) {
    try {
      // 如需动态限制，可替换成你的动态参数，比如从state中读取
      await validateImageDimensions(newOfficerData.image);
    } catch (err) {
      props.notify(err.message, 'error');
      return; // 校验不通过，终止上传流程
    }
  }

  setShowSpinner(true);
  try {
    const formData = createFormDataObject(newOfficerData);
    const res = await putAPIFormDataWrapper(editDepartmentUrl, formData);
    props.notify(res.data.data.message, 'success');
  } catch (err) {
    props.notify(err.message || '上传失败', 'error');
  } finally {
    setShowSpinner(false);
  }
};

3. 动态限制尺寸的扩展 #

如果需要支持动态调整宽高限制，比如从组件state或props中获取参数，只需在调用校验函数时传入对应值即可：

// 示例：从state中读取动态限制尺寸
const [maxSize, setMaxSize] = useState({ width: 300, height: 300 });

// 校验时传入动态参数
await validateImageDimensions(newOfficerData.image, maxSize.width, maxSize.height);

注意事项 #

• 确保newOfficerData.image是用户通过<input type="file">选择的File对象（可通过input的onChange事件获取：e.target.files[0]）
• 该校验是前端校验，为了安全，建议服务器端也做同样的尺寸校验，防止绕过前端限制的情况

内容的提问来源于stack exchange，提问作者user20885204