react之Ant Design upload上传图片照片墙使用Promise判断高宽_antdesign upload action (file)=>promise-优快云博客

本文介绍了一个用于限制图片上传格式、尺寸和分辨率的方法。通过使用FileReader API读取图片数据，检查图片是否为JPG、JPEG或PNG格式，大小是否小于5MB，并验证其分辨率是否达到指定标准。

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

实现限制图片上传格式、尺寸、分辨率的限制

  checkImageWH(file, width, height, resolve, reject) {
      let filereader = new FileReader();
      filereader.onload = e => {
        let src = e.target.result;
        const image = new Image();
        image.onload = function () {
          console.log(this.width, this.height)
          if ((width && this.width < width) || (height && this.height < height)) {
            if ((width && this.width < height) || (height && this.height < width)) {
              Modal.error({
                title: '分辨率请勿小于'+width+'*'+height+'或'+height+'*'+width
              })
              reject()
            } else {
              resolve();
            }
          } else {
            resolve();
          }
        };
        image.onerror = reject;
        image.src = src;
      };
      filereader.readAsDataURL(file);
  }

  handleBeforeUploads = file => {
    //限制图片 格式、size、分辨率
   const that= this
    return new Promise(function (resolve, reject) {
      const isJPG = file.type === 'image/jpg';
      const isJPEG = file.type === 'image/jpeg';
      const isPNG = file.type === 'image/png';
      const bigLt2M = file.size / 1024 / 1024 < 5;
      // console.log(file);
      if (!(isJPG || isJPEG || isPNG)) {
        Modal.error({
          title: '只能上传JPG 、JPEG 、 PNG格式的图片~',
        });
        reject()
      } else if (!bigLt2M) {
        Modal.error({
          title: '请误超过5M',
        });
        reject()
      }else{
        that.checkImageWH(file, 480, 854, resolve, reject)
      }
    })
  };

              <Upload
                name="file"
                action={uploadAction}
                listType="picture-card"
                fileList={fileList}
                onPreview={this.handlePreview} // 点击图片缩略图，进行预览
                beforeUpload={this.handleBeforeUploads} // 上传之前，对图片的格式做校验，并获取图片的宽高
                onChange={this.picChange}
              >
                {fileList.length >= 9 ? null : uploadButton}
              </Upload>