限制图片的长宽尺寸问题解决-2021-7-29

这是期望效果：

 

 

 用file上传文件，一开始用的file.size，发现计算的是图片的大小，因分辨率不相同，两张长宽尺寸一样的图片size也是不同的，无法达到目的。

用Image()方法，

把图片file 传给Image() new 出来的对象 image，再用其width和height属性

全局声明image:

 constructor(props) {
    super(props);
    this.image = new Image();
    this.width = 0;
    this.height = 0;
    this.state = {
      imgsList: [],
      referralType: '1'
    };
  }

 

将file赋给image.src:

               <Upload
                  accept='.jpg,.png,.jpeg,.bmp'
                  className='report-upload'
                  showUploadList={{showRemoveIcon: false}}
                  beforeUpload={(file) => {
                    this.setState(() => ({
                      imgsList: [file]
                    }));
                    this.image.src = file;
                    this.width = this.image.width;
                    this.height = this.image.height;
                    return false;
                  }}
                  fileList={imgsList}
                >
                  {imgsList.length === 0 && <div className='item-upload'>{tmp.pic || '上传图片'}</div>}
                </Upload>

 

使用width, height限制：

 if (!(this.width === 260 && this.height === 120) || !(this.width === 260 && this.height === 42)) {
        alert('请上传尺寸为260 * 120 或 260 * 42的图片');
        return false;
      }

需要注意：

我改动之后发现width和height都是0，

测试的时候放在服务器上测试，本地不行的。因为js没有权限读取和修改本地的文件，只有在服务器上通过url下载图片才能读取到图片的宽高和大小

参考https://zhidao.baidu.com/question/488777030449774252.html

 

更新:

上面方法还是会出问题

在<Upload>标签后加个<img>标签把图片显示出来,opacity设成0,回到<Upload>标签里的beforeupload方法里面,通过getElementById读取图片长宽,就可以了.

<Upload
                  accept='.jpg,.png,.jpeg,.bmp'
                  className='report-upload'
                  showUploadList={{ showRemoveIcon: false }}
                  beforeUpload={(file) => {
                    this.getBase64(file).then((value) => {
                      this.setState({
                        imgsList: [file],
                        image: value
                      });
                      document.getElementById('readyImage').onload = (e) => {
                        this.imageHeight = e.target.height;
                        this.imageWidth = e.target.width;
                        // this.h_loadImage(this.height, this.width)
                      };
                    });
                    return false;
                  }}
                  fileList={imgsList}
                >
                  {imgsList.length === 0 && <div className='item-upload'>{tmp.pic || '上传图片'}</div>}
                </Upload>
                {imgsList.length !== 0 && (
                  <div className='report-delete-button'>
                    <Icon
                      type='delete'
                      onClick={() => {
                        this.setState(() => ({
                          imgsList: []
                        }));
                        return true;
                      }}
                    />
                  </div>
                )}